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

2021-10-18 23:20:40 +02:00
parent 81d8097959 d4a39f45cb
commit e26aaea228
80 changed files with 99 additions and 98 deletions
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -24,7 +24,7 @@ jobs:

    steps:

-    - uses: actions/checkout@v2.3.4
+    - uses: actions/checkout@v2.3.5

    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v2.4.1
@@ -80,7 +80,7 @@ jobs:

    steps:

-    - uses: actions/checkout@v2.3.4
+    - uses: actions/checkout@v2.3.5

    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v2.4.1
@@ -136,7 +136,7 @@ jobs:

    steps:

-    - uses: actions/checkout@v2.3.4
+    - uses: actions/checkout@v2.3.5

    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v2.4.1
--- a/docs/api/extensions/bubble-menu.md
+++ b/docs/api/extensions/bubble-menu.md
@@ -67,7 +67,7 @@ new Editor({
 ```

 ### Frameworks
-<tiptap-demo name="Extensions/BubbleMenu"></tiptap-demo>
+https://embed.tiptap.dev/preview/Extensions/BubbleMenu

 ### Custom logic
 Customize the logic for showing the menu with the `shouldShow` option. For components, `shouldShow` can be passed as a prop.
--- a/docs/api/extensions/character-count.md
+++ b/docs/api/extensions/character-count.md
@@ -36,7 +36,7 @@ CharacterCount.configure({
 [packages/extension-character-count/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-character-count/)

 ## Usage
-<tiptap-demo name="Extensions/CharacterCount"></tiptap-demo>
+https://embed.tiptap.dev/preview/Extensions/CharacterCount

 ## Count words, emojis, letters …
 Want to count words instead? Or emojis? Or the letter *a*? Sure, no problem. You can access the `textContent` directly and count whatever you’re into.
--- a/docs/api/extensions/collaboration-cursor.md
+++ b/docs/api/extensions/collaboration-cursor.md
@@ -57,5 +57,5 @@ editor.commands.user({ name: 'Philipp Kühn', color: '#000000' })
 :::warning Public
 The content of this editor is shared with other users.
 :::
-<tiptap-demo name="Extensions/CollaborationCursor" hide-source></tiptap-demo>
-<tiptap-demo name="Extensions/CollaborationCursor"></tiptap-demo>
+https://embed.tiptap.dev/preview/Extensions/CollaborationCursor?hideSource
+https://embed.tiptap.dev/preview/Extensions/CollaborationCursor
--- a/docs/api/extensions/collaboration.md
+++ b/docs/api/extensions/collaboration.md
@@ -89,5 +89,5 @@ editor.commands.redo()
 :::warning Public
 The content of this editor is shared with other users.
 :::
-<tiptap-demo name="Extensions/Collaboration" hide-source></tiptap-demo>
-<tiptap-demo name="Extensions/Collaboration"></tiptap-demo>
+https://embed.tiptap.dev/preview/Extensions/Collaboration?hideSource
+https://embed.tiptap.dev/preview/Extensions/Collaboration
--- a/docs/api/extensions/color.md
+++ b/docs/api/extensions/color.md
@@ -53,4 +53,4 @@ editor.commands.unsetColor()
 [packages/extension-color/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-color/)

 ## Usage
-<tiptap-demo name="Extensions/Color"></tiptap-demo>
+https://embed.tiptap.dev/preview/Extensions/Color
--- a/docs/api/extensions/dropcursor.md
+++ b/docs/api/extensions/dropcursor.md
@@ -57,4 +57,4 @@ Dropcursor.configure({
 [packages/extension-dropcursor/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-dropcursor/)

 ## Usage
-<tiptap-demo name="Extensions/Dropcursor"></tiptap-demo>
+https://embed.tiptap.dev/preview/Extensions/Dropcursor
--- a/docs/api/extensions/floating-menu.md
+++ b/docs/api/extensions/floating-menu.md
@@ -63,7 +63,7 @@ new Editor({
 ```

 ## Using a framework
-<tiptap-demo name="Extensions/FloatingMenu"></tiptap-demo>
+https://embed.tiptap.dev/preview/Extensions/FloatingMenu

 ### Custom logic
 Customize the logic for showing the menu with the `shouldShow` option. For components, `shouldShow` can be passed as a prop.
--- a/docs/api/extensions/focus.md
+++ b/docs/api/extensions/focus.md
@@ -48,4 +48,4 @@ Focus.configure({
 [packages/extension-focus/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-focus/)

 ## Usage
-<tiptap-demo name="Extensions/Focus"></tiptap-demo>
+https://embed.tiptap.dev/preview/Extensions/Focus
--- a/docs/api/extensions/font-family.md
+++ b/docs/api/extensions/font-family.md
@@ -52,4 +52,4 @@ editor.commands.unsetFontFamily()
 [packages/extension-font-family/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-font-family/)

 ## Usage
-<tiptap-demo name="Extensions/FontFamily"></tiptap-demo>
+https://embed.tiptap.dev/preview/Extensions/FontFamily
--- a/docs/api/extensions/gapcursor.md
+++ b/docs/api/extensions/gapcursor.md
@@ -24,4 +24,4 @@ yarn add @tiptap/extension-gapcursor
 [packages/extension-gapcursor/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-gapcursor/)

 ## Usage
-<tiptap-demo name="Extensions/Gapcursor"></tiptap-demo>
+https://embed.tiptap.dev/preview/Extensions/Gapcursor
--- a/docs/api/extensions/history.md
+++ b/docs/api/extensions/history.md
@@ -67,4 +67,4 @@ editor.commands.redo()
 [packages/extension-history/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-history/)

 ## Usage
-<tiptap-demo name="Extensions/History"></tiptap-demo>
+https://embed.tiptap.dev/preview/Extensions/History
--- a/docs/api/extensions/placeholder.md
+++ b/docs/api/extensions/placeholder.md
@@ -94,4 +94,4 @@ Placeholder.configure({
 [packages/extension-placeholder/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-placeholder/)

 ## Usage
-<tiptap-demo name="Extensions/Placeholder"></tiptap-demo>
+https://embed.tiptap.dev/preview/Extensions/Placeholder
--- a/docs/api/extensions/text-align.md
+++ b/docs/api/extensions/text-align.md
@@ -86,4 +86,4 @@ editor.commands.unsetTextAlign()
 [packages/extension-text-align/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-text-align/)

 ## Usage
-<tiptap-demo name="Extensions/TextAlign"></tiptap-demo>
+https://embed.tiptap.dev/preview/Extensions/TextAlign
--- a/docs/api/extensions/typography.md
+++ b/docs/api/extensions/typography.md
@@ -52,4 +52,4 @@ yarn add @tiptap/extension-typography
 [packages/extension-typography/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-typography/)

 ## Usage
-<tiptap-demo name="Extensions/Typography"></tiptap-demo>
+https://embed.tiptap.dev/preview/Extensions/Typography
--- a/docs/api/marks/bold.md
+++ b/docs/api/marks/bold.md
@@ -69,4 +69,4 @@ editor.commands.unsetBold()
 [packages/extension-bold/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-bold/)

 ## Usage
-<tiptap-demo name="Marks/Bold"></tiptap-demo>
+https://embed.tiptap.dev/preview/Marks/Bold
--- a/docs/api/marks/code.md
+++ b/docs/api/marks/code.md
@@ -65,4 +65,4 @@ editor.commands.unsetCode()
 [packages/extension-code/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-code/)

 ## Usage
-<tiptap-demo name="Marks/Code"></tiptap-demo>
+https://embed.tiptap.dev/preview/Marks/Code
--- a/docs/api/marks/highlight.md
+++ b/docs/api/marks/highlight.md
@@ -79,4 +79,4 @@ editor.commands. unsetHighlight()
 [packages/extension-highlight/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-highlight/)

 ## Usage
-<tiptap-demo name="Marks/Highlight"></tiptap-demo>
+https://embed.tiptap.dev/preview/Marks/Highlight
--- a/docs/api/marks/italic.md
+++ b/docs/api/marks/italic.md
@@ -69,4 +69,4 @@ editor.commands.unsetItalic()
 [packages/extension-italic/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-italic/)

 ## Usage
-<tiptap-demo name="Marks/Italic"></tiptap-demo>
+https://embed.tiptap.dev/preview/Marks/Italic
--- a/docs/api/marks/link.md
+++ b/docs/api/marks/link.md
@@ -99,4 +99,4 @@ this.editor.getAttributes('link').href
 [packages/extension-link/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-link/)

 ## Usage
-<tiptap-demo name="Marks/Link"></tiptap-demo>
+https://embed.tiptap.dev/preview/Marks/Link
--- a/docs/api/marks/strike.md
+++ b/docs/api/marks/strike.md
@@ -69,4 +69,4 @@ editor.commands.unsetStrike()
 [packages/extension-strike/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-strike/)

 ## Usage
-<tiptap-demo name="Marks/Strike"></tiptap-demo>
+https://embed.tiptap.dev/preview/Marks/Strike
--- a/docs/api/marks/subscript.md
+++ b/docs/api/marks/subscript.md
@@ -63,4 +63,4 @@ editor.commands.unsetSubscript()
 [packages/extension-subscript/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-subscript/)

 ## Usage
-<tiptap-demo name="Marks/Subscript"></tiptap-demo>
+https://embed.tiptap.dev/preview/Marks/Subscript
--- a/docs/api/marks/superscript.md
+++ b/docs/api/marks/superscript.md
@@ -63,4 +63,4 @@ editor.commands.unsetSuperscript()
 [packages/extension-superscript/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-superscript/)

 ## Usage
-<tiptap-demo name="Marks/Superscript"></tiptap-demo>
+https://embed.tiptap.dev/preview/Marks/Superscript
--- a/docs/api/marks/text-style.md
+++ b/docs/api/marks/text-style.md
@@ -31,4 +31,4 @@ editor.command.removeEmptyTextStyle()
 [packages/extension-text-style/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-text-style/)

 ## Usage
-<tiptap-demo name="Marks/TextStyle"></tiptap-demo>
+https://embed.tiptap.dev/preview/Marks/TextStyle
--- a/docs/api/marks/underline.md
+++ b/docs/api/marks/underline.md
@@ -69,4 +69,4 @@ editor.commands.unsetUnderline()
 [packages/extension-underline/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-underline/)

 ## Usage
-<tiptap-demo name="Marks/Underline"></tiptap-demo>
+https://embed.tiptap.dev/preview/Marks/Underline
--- a/docs/api/nodes/blockquote.md
+++ b/docs/api/nodes/blockquote.md
@@ -64,4 +64,4 @@ editor.commands.unsetBlockquote()
 [packages/extension-blockquote/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-blockquote/)

 ## Usage
-<tiptap-demo name="Nodes/Blockquote"></tiptap-demo>
+https://embed.tiptap.dev/preview/Nodes/Blockquote
--- a/docs/api/nodes/bullet-list.md
+++ b/docs/api/nodes/bullet-list.md
@@ -53,4 +53,4 @@ editor.commands.toggleBulletList()
 [packages/extension-bullet-list/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-bullet-list/)

 ## Usage
-<tiptap-demo name="Nodes/BulletList"></tiptap-demo>
+https://embed.tiptap.dev/preview/Nodes/BulletList
--- a/docs/api/nodes/code-block-lowlight.md
+++ b/docs/api/nodes/code-block-lowlight.md
@@ -69,4 +69,4 @@ editor.commands.toggleCodeBlock()
 [packages/extension-code-block-lowlight/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-code-block-lowlight/)

 ## Usage
-<tiptap-demo name="Nodes/CodeBlockLowlight"></tiptap-demo>
+https://embed.tiptap.dev/preview/Nodes/CodeBlockLowlight
--- a/docs/api/nodes/code-block.md
+++ b/docs/api/nodes/code-block.md
@@ -73,4 +73,4 @@ editor.commands.toggleCodeBlock()
 [packages/extension-code-block/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-code-block/)

 ## Usage
-<tiptap-demo name="Nodes/CodeBlock"></tiptap-demo>
+https://embed.tiptap.dev/preview/Nodes/CodeBlock
--- a/docs/api/nodes/document.md
+++ b/docs/api/nodes/document.md
@@ -28,4 +28,4 @@ yarn add @tiptap/extension-document
 [packages/extension-document/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-document/)

 ## Usage
-<tiptap-demo name="Nodes/Document"></tiptap-demo>
+https://embed.tiptap.dev/preview/Nodes/Document
--- a/docs/api/nodes/emoji.md
+++ b/docs/api/nodes/emoji.md
@@ -21,4 +21,4 @@ You can use any emoji picker, or build your own. Just use [commands](/api/comman
 this.editor.chain().focus().insertContent('✨').run()
 ```

-<tiptap-demo name="Nodes/Emoji"></tiptap-demo>
+https://embed.tiptap.dev/preview/Nodes/Emoji
--- a/docs/api/nodes/hard-break.md
+++ b/docs/api/nodes/hard-break.md
@@ -60,4 +60,4 @@ editor.commands.setHardBreak()
 [packages/extension-hard-break/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-hard-break/)

 ## Usage
-<tiptap-demo name="Nodes/HardBreak"></tiptap-demo>
+https://embed.tiptap.dev/preview/Nodes/HardBreak
--- a/docs/api/nodes/heading.md
+++ b/docs/api/nodes/heading.md
@@ -74,4 +74,4 @@ editor.commands.toggleHeading({ level: 1 })
 [packages/extension-heading/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-heading/)

 ## Usage
-<tiptap-demo name="Nodes/Heading"></tiptap-demo>
+https://embed.tiptap.dev/preview/Nodes/Heading
--- a/docs/api/nodes/horizontal-rule.md
+++ b/docs/api/nodes/horizontal-rule.md
@@ -46,4 +46,4 @@ editor.commands.setHorizontalRule()
 [packages/extension-horizontal-rule/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-horizontal-rule/)

 ## Usage
-<tiptap-demo name="Nodes/HorizontalRule"></tiptap-demo>
+https://embed.tiptap.dev/preview/Nodes/HorizontalRule
--- a/docs/api/nodes/image.md
+++ b/docs/api/nodes/image.md
@@ -62,4 +62,4 @@ editor.commands.setImage({ src: 'https://example.com/foobar.png', alt: 'A boring
 [packages/extension-image/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-image/)

 ## Usage
-<tiptap-demo name="Nodes/Image"></tiptap-demo>
+https://embed.tiptap.dev/preview/Nodes/Image
--- a/docs/api/nodes/list-item.md
+++ b/docs/api/nodes/list-item.md
@@ -44,4 +44,4 @@ ListItem.configure({
 [packages/extension-list-item/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-list-item/)

 ## Usage
-<tiptap-demo name="Nodes/ListItem"></tiptap-demo>
+https://embed.tiptap.dev/preview/Nodes/ListItem
--- a/docs/api/nodes/mention.md
+++ b/docs/api/nodes/mention.md
@@ -80,4 +80,4 @@ Mention.configure({
 [packages/extension-mention/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-mention/)

 ## Usage
-<tiptap-demo name="Nodes/Mention"></tiptap-demo>
+https://embed.tiptap.dev/preview/Nodes/Mention
--- a/docs/api/nodes/ordered-list.md
+++ b/docs/api/nodes/ordered-list.md
@@ -53,4 +53,4 @@ editor.commands.toggleOrderedList()
 [packages/extension-ordered-list/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-ordered-list/)

 ## Usage
-<tiptap-demo name="Nodes/OrderedList"></tiptap-demo>
+https://embed.tiptap.dev/preview/Nodes/OrderedList
--- a/docs/api/nodes/paragraph.md
+++ b/docs/api/nodes/paragraph.md
@@ -53,4 +53,4 @@ editor.commands.setParagraph()
 [packages/extension-paragraph/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-paragraph/)

 ## Usage
-<tiptap-demo name="Nodes/Paragraph"></tiptap-demo>
+https://embed.tiptap.dev/preview/Nodes/Paragraph
--- a/docs/api/nodes/table-cell.md
+++ b/docs/api/nodes/table-cell.md
@@ -24,4 +24,4 @@ This extension requires the [`Table`](/api/nodes/table), [`TableRow`](/api/nodes
 [packages/extension-table-cell/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-table-cell/)

 ## Usage
-<tiptap-demo name="Nodes/Table"></tiptap-demo>
+https://embed.tiptap.dev/preview/Nodes/Table
--- a/docs/api/nodes/table-header.md
+++ b/docs/api/nodes/table-header.md
@@ -40,4 +40,4 @@ This extension requires the [`Table`](/api/nodes/table), [`TableRow`](/api/nodes
 [packages/extension-table-header/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-table-header/)

 ## Usage
-<tiptap-demo name="Nodes/Table"></tiptap-demo>
+https://embed.tiptap.dev/preview/Nodes/Table
--- a/docs/api/nodes/table-row.md
+++ b/docs/api/nodes/table-row.md
@@ -24,4 +24,4 @@ This extension requires the [`Table`](/api/nodes/table), [`TableHeader`](/api/no
 [packages/extension-table-row/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-table-row/)

 ## Usage
-<tiptap-demo name="Nodes/Table"></tiptap-demo>
+https://embed.tiptap.dev/preview/Nodes/Table
--- a/docs/api/nodes/table.md
+++ b/docs/api/nodes/table.md
@@ -190,4 +190,4 @@ editor.commands.fixTables()
 [packages/extension-table/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-table/)

 ## Usage
-<tiptap-demo name="Nodes/Table"></tiptap-demo>
+https://embed.tiptap.dev/preview/Nodes/Table
--- a/docs/api/nodes/task-item.md
+++ b/docs/api/nodes/task-item.md
@@ -46,4 +46,4 @@ TaskItem.configure({
 [packages/extension-task-item/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-task-item/)

 ## Usage
-<tiptap-demo name="Nodes/TaskItem"></tiptap-demo>
+https://embed.tiptap.dev/preview/Nodes/TaskItem
--- a/docs/api/nodes/task-list.md
+++ b/docs/api/nodes/task-list.md
@@ -53,4 +53,4 @@ editor.commands.toggleTaskList()
 [packages/extension-task-list/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-task-list/)

 ## Usage
-<tiptap-demo name="Nodes/TaskList"></tiptap-demo>
+https://embed.tiptap.dev/preview/Nodes/TaskList
--- a/docs/api/nodes/text.md
+++ b/docs/api/nodes/text.md
@@ -26,4 +26,4 @@ yarn add @tiptap/extension-text
 [packages/extension-text/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-text/)

 ## Usage
-<tiptap-demo name="Nodes/Text"></tiptap-demo>
+https://embed.tiptap.dev/preview/Nodes/Text
--- a/docs/api/utilities/html.md
+++ b/docs/api/utilities/html.md
@@ -10,7 +10,7 @@ All it needs is JSON or a HTML string, and a list of extensions.
 [packages/html/](https://github.com/ueberdosis/tiptap/blob/main/packages/html/)

 ## Generate HTML from JSON
-<tiptap-demo name="GuideContent/GenerateHTML"></tiptap-demo>
+https://embed.tiptap.dev/preview/GuideContent/GenerateHTML

 ## Generate JSON from HTML
-<tiptap-demo name="GuideContent/GenerateJSON"></tiptap-demo>
+https://embed.tiptap.dev/preview/GuideContent/GenerateJSON
--- a/docs/examples/book.md
+++ b/docs/examples/book.md
@@ -2,4 +2,4 @@

 This demo has more than 200,000 words, check the performance yourself.

-<tiptap-demo name="Examples/Book"></tiptap-demo>
+https://embed.tiptap.dev/preview/Examples/Book
--- a/docs/examples/collaborative-editing.md
+++ b/docs/examples/collaborative-editing.md
@@ -18,7 +18,7 @@ It connects all clients to a WebSocket server and merges changes to the document
 Be nice! The content of this editor is shared with other users from the Internet.
 :::

-<tiptap-demo name="Examples/CollaborativeEditing"></tiptap-demo>
+https://embed.tiptap.dev/preview/Examples/CollaborativeEditing

 ## Backend
 In case you’re wondering what kind of sorcery you need on the server to achieve this, here is the whole backend code for the demo:
--- a/docs/examples/custom-document.md
+++ b/docs/examples/custom-document.md
@@ -1,3 +1,3 @@
 # Custom Document

-<tiptap-demo name="Examples/CustomDocument"></tiptap-demo>
+https://embed.tiptap.dev/preview/Examples/CustomDocument
--- a/docs/examples/default.md
+++ b/docs/examples/default.md
@@ -1,4 +1,4 @@
 # Default text editor
 Did we mention that you have full control over the rendering of the editor? Here is a barebones example without any styling, but packed with a whole set of common extensions.

-<tiptap-demo name="Examples/Default"></tiptap-demo>
+https://embed.tiptap.dev/preview/Examples/Default
--- a/docs/examples/drawing.md
+++ b/docs/examples/drawing.md
@@ -1,4 +1,4 @@
 # Drawing
 Did you ever wanted to draw in a text editor? Me neither. Anyway, here is an example how that could work with tiptap. If you want to build something like that, [learn more about node views](/guide/node-views).

-<tiptap-demo name="Examples/Drawing"></tiptap-demo>
+https://embed.tiptap.dev/preview/Examples/Drawing
--- a/docs/examples/formatting.md
+++ b/docs/examples/formatting.md
@@ -1,3 +1,3 @@
 # Formatting

-<tiptap-demo name="Examples/Formatting"></tiptap-demo>
+https://embed.tiptap.dev/preview/Examples/Formatting
--- a/docs/examples/images.md
+++ b/docs/examples/images.md
@@ -8,4 +8,4 @@ Though thousands of developers use tiptap every day, it’s still not our full-t
 [Become a sponsor on GitHub →](https://github.com/sponsors/ueberdosis)
 :::

-<tiptap-demo name="Examples/Images"></tiptap-demo>
+https://embed.tiptap.dev/preview/Examples/Images
--- a/docs/examples/interactivity.md
+++ b/docs/examples/interactivity.md
@@ -2,6 +2,6 @@

 Thanks to [node views](/guide/node-views) you can add interactivity to your nodes. If you can write it in JavaScript, you can add it to the editor.

-<tiptap-demo name="GuideNodeViews/VueComponent"></tiptap-demo>
+https://embed.tiptap.dev/preview/GuideNodeViews/VueComponent

-<tiptap-demo name="GuideNodeViews/VueComponentContent"></tiptap-demo>
+https://embed.tiptap.dev/preview/GuideNodeViews/VueComponentContent
--- a/docs/examples/markdown-shortcuts.md
+++ b/docs/examples/markdown-shortcuts.md
@@ -1,3 +1,3 @@
 # Markdown shortcuts

-<tiptap-demo name="Examples/MarkdownShortcuts"></tiptap-demo>
+https://embed.tiptap.dev/preview/Examples/MarkdownShortcuts
--- a/docs/examples/menus.md
+++ b/docs/examples/menus.md
@@ -1,3 +1,3 @@
 # Menus

-<tiptap-demo name="Examples/Menus"></tiptap-demo>
+https://embed.tiptap.dev/preview/Examples/Menus
--- a/docs/examples/minimal.md
+++ b/docs/examples/minimal.md
@@ -1,3 +1,4 @@
 # Minimal setup

-<tiptap-demo name="Examples/Minimal"></tiptap-demo>
+https://embed.tiptap.dev/preview/Examples/Minimal
+
--- a/docs/examples/savvy.md
+++ b/docs/examples/savvy.md
@@ -1,3 +1,3 @@
 # A clever editor

-<tiptap-demo name="Examples/Savvy"></tiptap-demo>
+https://embed.tiptap.dev/preview/Examples/Savvy
--- a/docs/examples/suggestions.md
+++ b/docs/examples/suggestions.md
@@ -1,3 +1,3 @@
 # Mentions

-<tiptap-demo name="Examples/Community"></tiptap-demo>
+https://embed.tiptap.dev/preview/Examples/Community
--- a/docs/examples/syntax-highlighting.md
+++ b/docs/examples/syntax-highlighting.md
@@ -1,3 +1,3 @@
 # Syntax highlighting

-<tiptap-demo name="Examples/CodeBlockLanguage"></tiptap-demo>
+https://embed.tiptap.dev/preview/Examples/CodeBlockLanguage
--- a/docs/examples/tables.md
+++ b/docs/examples/tables.md
@@ -4,4 +4,4 @@
 Using this extension in a commercial project? [Become a sponsor](/sponsor) to fund its development!
 :::

-<tiptap-demo name="Examples/Tables"></tiptap-demo>
+https://embed.tiptap.dev/preview/Examples/Tables
--- a/docs/examples/tasks.md
+++ b/docs/examples/tasks.md
@@ -1,3 +1,3 @@
 # Tasks

-<tiptap-demo name="Examples/Tasks"></tiptap-demo>
+https://embed.tiptap.dev/preview/Examples/Tasks
--- a/docs/experiments/commands.md
+++ b/docs/experiments/commands.md
@@ -5,4 +5,4 @@
 ## Issues
 * It’s fine to use, just don’t send bug reports, PRs or anything else. We’ll just need some time to publish that as an official extension.

-<tiptap-demo name="Experiments/Commands"></tiptap-demo>
+https://embed.tiptap.dev/preview/Experiments/Commands
--- a/docs/experiments/details.md
+++ b/docs/experiments/details.md
@@ -5,4 +5,4 @@
 ## Issues
 * Nested lists cause trouble

-<tiptap-demo name="Experiments/Details"></tiptap-demo>
+https://embed.tiptap.dev/preview/Experiments/Details
--- a/docs/experiments/embeds.md
+++ b/docs/experiments/embeds.md
@@ -5,4 +5,4 @@
 ## Issues
 * Oh man, building a really good iframe/embed extension will take some time. The best thing to speed up the development is to [sponsor our work](/sponsor) on GitHub.

-<tiptap-demo name="Experiments/Embeds"></tiptap-demo>
+https://embed.tiptap.dev/preview/Experiments/Embeds
--- a/docs/experiments/figure.md
+++ b/docs/experiments/figure.md
@@ -9,4 +9,4 @@
 ## Issues
 * The current implementation works with images only.

-<tiptap-demo name="Experiments/Figure"></tiptap-demo>
+https://embed.tiptap.dev/preview/Experiments/Figure
--- a/docs/experiments/generic-figure.md
+++ b/docs/experiments/generic-figure.md
@@ -2,4 +2,4 @@

 ⚠️ Experiment

-<tiptap-demo name="Experiments/GenericFigure"></tiptap-demo>
+https://embed.tiptap.dev/preview/Experiments/GenericFigure
--- a/docs/experiments/linter.md
+++ b/docs/experiments/linter.md
@@ -7,4 +7,4 @@ Linter can be used to check the content as per your wish and highlight it to the
 ## Issues
 * There is no decoration API in tiptap, that’s why this is a lot of ProseMirror work. Before we’ll publish that example, we’d need to find a few ways to make it more tiptap-like. For example, it would be great to use Vue/React components for the widget.

-<tiptap-demo name="Experiments/Linter"></tiptap-demo>
+https://embed.tiptap.dev/preview/Experiments/Linter
--- a/docs/experiments/multiple-editors.md
+++ b/docs/experiments/multiple-editors.md
@@ -2,4 +2,4 @@

 The following example has three different instances of tiptap. The first is configured to have a single paragraph of text, the second to have a task list and the third to have text. All of them are stored in a single Y.js document, which can be synced in real-time with other users.

-<tiptap-demo name="Experiments/MultipleEditors"></tiptap-demo>
+https://embed.tiptap.dev/preview/Experiments/MultipleEditors
--- a/docs/experiments/trailing-node.md
+++ b/docs/experiments/trailing-node.md
@@ -5,4 +5,4 @@
 ## Issues
 * This implementation adds an actual node. It’d be great to use a decoration for that use case, so the document isn’t modified.

-<tiptap-demo name="Experiments/TrailingNode"></tiptap-demo>
+https://embed.tiptap.dev/preview/Experiments/TrailingNode
--- a/docs/guide/menus.md
+++ b/docs/guide/menus.md
@@ -18,12 +18,12 @@ A fixed menu, for example on top of the editor, can be anything. We don’t prov
 ### Bubble menu
 The [bubble menu](/api/extensions/bubble-menu) appears when selecting text. Markup and styling is totally up to you.

-<tiptap-demo name="Extensions/BubbleMenu" hide-source></tiptap-demo>
+https://embed.tiptap.dev/preview/Extensions/BubbleMenu?hideSource

 ### Floating menu
 The [floating menu](/api/extensions/floating-menu) appears in empty lines. Markup and styling is totally up to you.

-<tiptap-demo name="Extensions/FloatingMenu" hide-source></tiptap-demo>
+https://embed.tiptap.dev/preview/Extensions/FloatingMenu?hideSource

 ### Slash commands (work in progress)
 It’s not an official extension yet, but [there’s an experiment you can use to add what we call slash commands](/experiments/commands). It allows you to start a new line with `/` and will bring up a popup to select which node should be added.
--- a/docs/guide/node-views/examples.md
+++ b/docs/guide/node-views/examples.md
@@ -12,16 +12,16 @@ Keep in mind that those are just examples to get you started, not officially sup
 ## Drag handles
 Drag handles aren’t that easy to add. We are still on the lookout what’s the best way to add them. Official support will come at some point, but there’s no timeline yet.

-<tiptap-demo name="GuideNodeViews/DragHandle"></tiptap-demo>
+https://embed.tiptap.dev/preview/GuideNodeViews/DragHandle

 ## Table of contents
 This one loops through the editor content, gives all headings an ID and renders a Table of Contents with Vue.

-<tiptap-demo name="GuideNodeViews/TableOfContents"></tiptap-demo>
+https://embed.tiptap.dev/preview/GuideNodeViews/TableOfContents

 ## Drawing in the editor
 The drawing example shows a SVG that enables you to draw inside the editor.

-<tiptap-demo name="Examples/Drawing"></tiptap-demo>
+https://embed.tiptap.dev/preview/Examples/Drawing

 It’s not working very well with the Collaboration extension. It’s sending all data on every change, which can get pretty huge with Y.js. If you plan to use those two in combination, you need to improve it or your WebSocket backend will melt.
--- a/docs/guide/node-views/js.md
+++ b/docs/guide/node-views/js.md
@@ -40,7 +40,7 @@ export default Node.create({

 Got it? Let’s see it in action. Feel free to copy the below example to get started.

-<tiptap-demo name="GuideNodeViews/JavaScript"></tiptap-demo>
+https://embed.tiptap.dev/preview/GuideNodeViews/JavaScript

 That node view even interacts with the editor. Time to see how that is wired up.

@@ -118,6 +118,6 @@ return {

 Got it? You’re free to do anything you like, as long as you return a container for the node view and another one for the content. Here is the above example in action:

-<tiptap-demo name="GuideNodeViews/JavaScriptContent"></tiptap-demo>
+https://embed.tiptap.dev/preview/GuideNodeViews/JavaScriptContent

 Keep in mind that this content is rendered by tiptap. That means you need to tell what kind of content is allowed, for example with `content: 'inline*'` in your node extension (that’s what we use in the above example).
--- a/docs/guide/node-views/react.md
+++ b/docs/guide/node-views/react.md
@@ -42,7 +42,7 @@ There is a little bit of magic required to make this work. But don’t worry, we

 Got it? Let’s see it in action. Feel free to copy the below example to get started.

-<tiptap-demo name="GuideNodeViews/ReactComponent"></tiptap-demo>
+https://embed.tiptap.dev/preview/GuideNodeViews/ReactComponent

 That component doesn’t interact with the editor, though. Time to wire it up.

@@ -90,7 +90,7 @@ export default () => {

 You don’t need to add those `className` attributes, feel free to remove them or pass other class names. Try it out in the following example:

-<tiptap-demo name="GuideNodeViews/ReactComponentContent"></tiptap-demo>
+https://embed.tiptap.dev/preview/GuideNodeViews/ReactComponentContent

 Keep in mind that this content is rendered by tiptap. That means you need to tell what kind of content is allowed, for example with `content: 'inline*'` in your node extension (that’s what we use in the above example).

@@ -126,4 +126,4 @@ Delete the current node
 ## Dragging
 To make your node views draggable, set `draggable: true` in the extension and add `data-drag-handle` to the DOM element that should function as the drag handle.

-<!-- <tiptap-demo name="GuideNodeViews/DragHandle"></tiptap-demo> -->
+<!-- https://embed.tiptap.dev/preview/GuideNodeViews/DragHandle -->
--- a/docs/guide/node-views/vue.md
+++ b/docs/guide/node-views/vue.md
@@ -44,7 +44,7 @@ There is a little bit of magic required to make this work. But don’t worry, we

 Got it? Let’s see it in action. Feel free to copy the below example to get started.

-<tiptap-demo name="GuideNodeViews/VueComponent"></tiptap-demo>
+https://embed.tiptap.dev/preview/GuideNodeViews/VueComponent

 That component doesn’t interact with the editor, though. Time to wire it up.

@@ -112,7 +112,7 @@ export default {

 You don’t need to add those `class` attributes, feel free to remove them or pass other class names. Try it out in the following example:

-<tiptap-demo name="GuideNodeViews/VueComponentContent"></tiptap-demo>
+https://embed.tiptap.dev/preview/GuideNodeViews/VueComponentContent

 Keep in mind that this content is rendered by tiptap. That means you need to tell what kind of content is allowed, for example with `content: 'inline*'` in your node extension (that’s what we use in the above example).

@@ -226,4 +226,4 @@ export default Vue.extend({
 ## Dragging
 To make your node views draggable, set `draggable: true` in the extension and add `data-drag-handle` to the DOM element that should function as the drag handle.

-<tiptap-demo name="GuideNodeViews/DragHandle"></tiptap-demo>
+https://embed.tiptap.dev/preview/GuideNodeViews/DragHandle
--- a/docs/guide/output.md
+++ b/docs/guide/output.md
@@ -42,7 +42,7 @@ editor.commands.setContent({

 Here is an interactive example where you can see that in action:

-<tiptap-demo name="GuideContent/ExportJSON" hide-source></tiptap-demo>
+https://embed.tiptap.dev/preview/GuideContent/ExportJSON?hideSource

 ### Option 2: HTML
 HTML can be easily rendered in other places, for example in emails and it’s wildly used, so it’s probably easier to switch the editor at some point. Anyway, every editor instance provides a method to get HTML from the current document:
@@ -66,7 +66,7 @@ editor.commands.setContent(`<p>Example Text</p>`)

 Use this interactive example to fiddle around:

-<tiptap-demo name="GuideContent/ExportHTML" hide-source></tiptap-demo>
+https://embed.tiptap.dev/preview/GuideContent/ExportHTML?hideSource

 ### Option 3: Y.js
 Our editor has top notch support for Y.js, which is amazing to add features like [realtime collaboration, offline editing, or syncing between devices](/guide/collaborative-editing).
@@ -112,18 +112,18 @@ const editor = new Editor({
 ### Option 1: Read-only instance of tiptap
 To render the saved content, set the editor to read-only. That’s how you can achieve the exact same rendering as it’s in the editor, without duplicating your CSS and other code.

-<tiptap-demo name="GuideContent/ReadOnly"></tiptap-demo>
+https://embed.tiptap.dev/preview/GuideContent/ReadOnly

 ### Option 2: Generate HTML from ProseMirror JSON
 If you need to render the content on the server side, for example to generate the HTML for a blog post which has been written in tiptap, you’ll probably want to do just that without an actual editor instance.

 That’s what the `generateHTML()` is for. It’s a helper function which renders HTML without an actual editor instance.

-<tiptap-demo name="GuideContent/GenerateHTML"></tiptap-demo>
+https://embed.tiptap.dev/preview/GuideContent/GenerateHTML

 By the way, the other way is possible, too. The below examples shows how to generate JSON from HTML.

-<tiptap-demo name="GuideContent/GenerateJSON"></tiptap-demo>
+https://embed.tiptap.dev/preview/GuideContent/GenerateJSON

 ## 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.
--- a/docs/installation/nuxt.md
+++ b/docs/installation/nuxt.md
@@ -99,4 +99,4 @@ You should now see tiptap in your browser. Time to give yourself a pat on the ba
 ## 5. Use v-model (optional)
 You’re probably used to bind your data with `v-model` in forms, that’s also possible with tiptap. Here is a working example component, that you can integrate in your project:

-<tiptap-demo name="GuideGettingStarted/VModel"></tiptap-demo>
+https://embed.tiptap.dev/preview/GuideGettingStarted/VModel
--- a/docs/installation/react.md
+++ b/docs/installation/react.md
@@ -93,4 +93,4 @@ You should now see tiptap in your browser. Time to give yourself a pat on the ba
 ## 5. The complete setup (optional)
 Ready to add more? Below is a demo that shows how you could set up what we call the default editor. Feel free to take this and start customizing it then:

-<tiptap-demo name="Examples/Default"></tiptap-demo>
+https://embed.tiptap.dev/preview/Examples/Default
--- a/docs/installation/vue2.md
+++ b/docs/installation/vue2.md
@@ -107,4 +107,4 @@ You should now see tiptap in your browser. Time to give yourself a pat on the ba
 ## 5. Use v-model (optional)
 You’re probably used to bind your data with `v-model` in forms, that’s also possible with tiptap. Here is a working example component, that you can integrate in your project:

-<tiptap-demo name="GuideGettingStarted/VModel"></tiptap-demo>
+https://embed.tiptap.dev/preview/GuideGettingStarted/VModel