ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

replace demo component with custom element

Browse Source
This commit is contained in:
Philipp Kühn
2021-08-25 23:10:20 +02:00
parent 96a7310b9d
commit 956b381f8d
83 changed files with 136 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
docs/src/TiptapDemo.js Normal file
View File

@@ -0,0 +1,36 @@
import iframeResize from 'iframe-resizer/js/iframeResizer'
class TiptapDemo extends HTMLElement {
url = 'https://embed.tiptap.dev'
connectedCallback() {
const wrapper = document.createElement('div')
const iframe = document.createElement('iframe')
const shadow = this.attachShadow({ mode: 'open' })
const name = this.getAttribute('name')
const inline = this.getAttribute('inline') === ''
const hideSource = this.getAttribute('hideSource') === ''
iframe.src = `${this.url}/preview/${name}?inline=${inline}&hideSource=${hideSource}`
iframe.width = '100%'
iframe.height = '0'
iframe.frameBorder = '0'
shadow.appendChild(wrapper)
iframe.addEventListener('load', () => {
iframeResize({}, iframe)
}, { once: true })
const observer = new IntersectionObserver(([entry]) => {
if (entry.isIntersecting) {
observer.unobserve(wrapper)
wrapper.appendChild(iframe)
}
})
observer.observe(wrapper)
}
}
window.customElements.define('tiptap-demo', TiptapDemo)

5
docs/src/docPages/api/extensions/bubble-menu.md
View File

@@ -42,10 +42,7 @@ new Editor({
```
### Frameworks
<demos :items="{
Vue: 'Extensions/BubbleMenu/Vue',
React: 'Extensions/BubbleMenu/React',
}" />
<tiptap-demo name="Extensions/BubbleMenu"></tiptap-demo>
### Custom logic
Customize the logic for showing the menu with the `shouldShow` option. For components, `shouldShow` can be passed as a prop.

2
docs/src/docPages/api/extensions/character-count.md
View File

@@ -22,7 +22,7 @@ yarn add @tiptap/extension-character-count
[packages/extension-character-count/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-character-count/)
## Usage
<demo name="Extensions/CharacterCount" />
<tiptap-demo name="Extensions/CharacterCount"></tiptap-demo>
## 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.

5
docs/src/docPages/api/extensions/collaboration-cursor.md
View File

@@ -40,6 +40,5 @@ This extension requires the [`Collaboration`](/api/extensions/collaboration) ext
:::warning Public
The content of this editor is shared with other users.
:::
<demo name="Extensions/CollaborationCursor" hide-source />
<demo name="Extensions/CollaborationCursor" highlight="11,39-45" />
<tiptap-demo name="Extensions/CollaborationCursor" hideSource></tiptap-demo>
<tiptap-demo name="Extensions/CollaborationCursor"></tiptap-demo>

4
docs/src/docPages/api/extensions/collaboration.md
View File

@@ -48,5 +48,5 @@ yarn add @tiptap/extension-collaboration yjs y-websocket
:::warning Public
The content of this editor is shared with other users.
:::
<demo name="Extensions/Collaboration" hide-source />
<demo name="Extensions/Collaboration" highlight="10,27-28,35-37,44" />
<tiptap-demo name="Extensions/Collaboration" hideSource></tiptap-demo>
<tiptap-demo name="Extensions/Collaboration"></tiptap-demo>

2
docs/src/docPages/api/extensions/color.md
View File

@@ -29,4 +29,4 @@ This extension requires the [`TextStyle`](/api/marks/text-style) mark.
[packages/extension-color/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-color/)
## Usage
<demo name="Extensions/Color" />
<tiptap-demo name="Extensions/Color"></tiptap-demo>

2
docs/src/docPages/api/extensions/dropcursor.md
View File

@@ -26,4 +26,4 @@ yarn add @tiptap/extension-dropcursor
[packages/extension-dropcursor/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-dropcursor/)
## Usage
<demo name="Extensions/Dropcursor" highlight="12,33" />
<tiptap-demo name="Extensions/Dropcursor"></tiptap-demo>

5
docs/src/docPages/api/extensions/floating-menu.md
View File

@@ -38,10 +38,7 @@ new Editor({
```
## Using a framework
<demos :items="{
Vue: 'Extensions/FloatingMenu/Vue',
React: 'Extensions/FloatingMenu/React',
}" />
<tiptap-demo name="Extensions/FloatingMenu"></tiptap-demo>
### Custom logic
Customize the logic for showing the menu with the `shouldShow` option. For components, `shouldShow` can be passed as a prop.

2
docs/src/docPages/api/extensions/focus.md
View File

@@ -25,4 +25,4 @@ yarn add @tiptap/extension-focus
[packages/extension-focus/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-focus/)
## Usage
<demo name="Extensions/Focus" highlight="12,34-37" />
<tiptap-demo name="Extensions/Focus"></tiptap-demo>

2
docs/src/docPages/api/extensions/font-family.md
View File

@@ -29,4 +29,4 @@ This extension requires the [`TextStyle`](/api/marks/text-style) mark.
[packages/extension-font-family/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-font-family/)
## Usage
<demo name="Extensions/FontFamily" />
<tiptap-demo name="Extensions/FontFamily"></tiptap-demo>

2
docs/src/docPages/api/extensions/gapcursor.md
View File

@@ -19,4 +19,4 @@ yarn add @tiptap/extension-gapcursor
[packages/extension-gapcursor/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-gapcursor/)
## Usage
<demo name="Extensions/Gapcursor" highlight="12,33" />
<tiptap-demo name="Extensions/Gapcursor"></tiptap-demo>

2
docs/src/docPages/api/extensions/history.md
View File

@@ -44,4 +44,4 @@ yarn add @tiptap/extension-history
[packages/extension-history/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-history/)
## Usage
<demo name="Extensions/History" highlight="3-8,20,39" />
<tiptap-demo name="Extensions/History"></tiptap-demo>

2
docs/src/docPages/api/extensions/placeholder.md
View File

@@ -26,4 +26,4 @@ yarn add @tiptap/extension-placeholder
[packages/extension-placeholder/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-placeholder/)
## Usage
<demo name="Extensions/Placeholder" />
<tiptap-demo name="Extensions/Placeholder"></tiptap-demo>

2
docs/src/docPages/api/extensions/text-align.md
View File

@@ -46,4 +46,4 @@ yarn add @tiptap/extension-text-align
[packages/extension-text-align/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-text-align/)
## Usage
<demo name="Extensions/TextAlign" highlight="29" />
<tiptap-demo name="Extensions/TextAlign"></tiptap-demo>

2
docs/src/docPages/api/extensions/typography.md
View File

@@ -45,4 +45,4 @@ yarn add @tiptap/extension-typography
[packages/extension-typography/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-typography/)
## Usage
<demo name="Extensions/Typography" highlight="12,31" />
<tiptap-demo name="Extensions/Typography"></tiptap-demo>

2
docs/src/docPages/api/marks/bold.md
View File

@@ -39,4 +39,4 @@ yarn add @tiptap/extension-bold
[packages/extension-bold/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-bold/)
## Usage
<demo name="Marks/Bold" highlight="3-5,17,36" />
<tiptap-demo name="Marks/Bold"></tiptap-demo>

2
docs/src/docPages/api/marks/code.md
View File

@@ -35,4 +35,4 @@ yarn add @tiptap/extension-code
[packages/extension-code/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-code/)
## Usage
<demo name="Marks/Code" highlight="3-5,17,36" />
<tiptap-demo name="Marks/Code"></tiptap-demo>

2
docs/src/docPages/api/marks/highlight.md
View File

@@ -36,4 +36,4 @@ yarn add @tiptap/extension-highlight
[packages/extension-highlight/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-highlight/)
## Usage
<demo name="Marks/Highlight" highlight="3-8,48,67" />
<tiptap-demo name="Marks/Highlight"></tiptap-demo>

2
docs/src/docPages/api/marks/italic.md
View File

@@ -40,4 +40,4 @@ yarn add @tiptap/extension-italic
[packages/extension-italic/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-italic/)
## Usage
<demo name="Marks/Italic" highlight="3-5,17,36" />
<tiptap-demo name="Marks/Italic"></tiptap-demo>

2
docs/src/docPages/api/marks/link.md
View File

@@ -40,4 +40,4 @@ This extension doesn’t bind a specific keyboard shortcut. You would probably o
[packages/extension-link/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-link/)
## Usage
<demo name="Marks/Link" highlight="3-8,18,39,56-61" />
<tiptap-demo name="Marks/Link"></tiptap-demo>

2
docs/src/docPages/api/marks/strike.md
View File

@@ -39,4 +39,4 @@ yarn add @tiptap/extension-strike
[packages/extension-strike/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-strike/)
## Usage
<demo name="Marks/Strike" highlight="3-5,17,36" />
<tiptap-demo name="Marks/Strike"></tiptap-demo>

2
docs/src/docPages/api/marks/subscript.md
View File

@@ -33,4 +33,4 @@ yarn add @tiptap/extension-subscript
[packages/extension-subscript/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-subscript/)
## Usage
<demo name="Marks/Subscript" highlight="3-5,16,35" />
<tiptap-demo name="Marks/Subscript"></tiptap-demo>

2
docs/src/docPages/api/marks/superscript.md
View File

@@ -33,4 +33,4 @@ yarn add @tiptap/extension-superscript
[packages/extension-superscript/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-superscript/)
## Usage
<demo name="Marks/Superscript" highlight="3-5,17,36" />
<tiptap-demo name="Marks/Superscript"></tiptap-demo>

2
docs/src/docPages/api/marks/text-style.md
View File

@@ -22,4 +22,4 @@ yarn add @tiptap/extension-text-style
[packages/extension-text-style/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-text-style/)
## Usage
<demo name="Marks/TextStyle" />
<tiptap-demo name="Marks/TextStyle"></tiptap-demo>

2
docs/src/docPages/api/marks/underline.md
View File

@@ -39,4 +39,4 @@ yarn add @tiptap/extension-underline
[packages/extension-underline/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-underline/)
## Usage
<demo name="Marks/Underline" highlight="3-5,17,36" />
<tiptap-demo name="Marks/Underline"></tiptap-demo>

2
docs/src/docPages/api/nodes/blockquote.md
View File

@@ -33,4 +33,4 @@ yarn add @tiptap/extension-blockquote
[packages/extension-blockquote/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-blockquote/)
## Usage
<demo name="Nodes/Blockquote" highlight="3-5,17,36" />
<tiptap-demo name="Nodes/Blockquote"></tiptap-demo>

2
docs/src/docPages/api/nodes/bullet-list.md
View File

@@ -35,4 +35,4 @@ This extension requires the [`ListItem`](/api/nodes/list-item) node.
[packages/extension-bullet-list/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-bullet-list/)
## Usage
<demo name="Nodes/BulletList" highlight="3-5,17-18,37-38" />
<tiptap-demo name="Nodes/BulletList"></tiptap-demo>

2
docs/src/docPages/api/nodes/code-block-lowlight.md
View File

@@ -34,4 +34,4 @@ yarn add @tiptap/extension-code-block-lowlight
[packages/extension-code-block-lowlight/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-code-block-lowlight/)
## Usage
<demo name="Nodes/CodeBlockLowlight" />
<tiptap-demo name="Nodes/CodeBlockLowlight"></tiptap-demo>

2
docs/src/docPages/api/nodes/code-block.md
View File

@@ -38,4 +38,4 @@ yarn add @tiptap/extension-code-block
[packages/extension-code-block/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-code-block/)
## Usage
<demo name="Nodes/CodeBlock" highlight="3-5,17,36" />
<tiptap-demo name="Nodes/CodeBlock"></tiptap-demo>

2
docs/src/docPages/api/nodes/document.md
View File

@@ -23,4 +23,4 @@ yarn add @tiptap/extension-document
[packages/extension-document/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-document/)
## Usage
<demo name="Nodes/Document" highlight="10,28" />
<tiptap-demo name="Nodes/Document"></tiptap-demo>

2
docs/src/docPages/api/nodes/emoji.md
View File

@@ -16,4 +16,4 @@ You can use any emoji picker, or build your own. Just use [commands](/api/comman
this.editor.chain().focus().insertContent('✨').run()
```
<demo name="Nodes/Emoji" />
<tiptap-demo name="Nodes/Emoji"></tiptap-demo>

2
docs/src/docPages/api/nodes/hard-break.md
View File

@@ -27,4 +27,4 @@ yarn add @tiptap/extension-hard-break
[packages/extension-hard-break/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-hard-break/)
## Usage
<demo name="Nodes/HardBreak" highlight="3-5,17,36" />
<tiptap-demo name="Nodes/HardBreak"></tiptap-demo>

2
docs/src/docPages/api/nodes/heading.md
View File

@@ -34,4 +34,4 @@ yarn add @tiptap/extension-heading
[packages/extension-heading/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-heading/)
## Usage
<demo name="Nodes/Heading" highlight="3-11,23,42-44" />
<tiptap-demo name="Nodes/Heading"></tiptap-demo>

2
docs/src/docPages/api/nodes/horizontal-rule.md
View File

@@ -32,4 +32,4 @@ yarn add @tiptap/extension-horizontal-rule
[packages/extension-horizontal-rule/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-horizontal-rule/)
## Usage
<demo name="Nodes/HorizontalRule" highlight="3-5,17,36" />
<tiptap-demo name="Nodes/HorizontalRule"></tiptap-demo>

2
docs/src/docPages/api/nodes/image.md
View File

@@ -27,4 +27,4 @@ yarn add @tiptap/extension-image
[packages/extension-image/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-image/)
## Usage
<demo name="Nodes/Image" />
<tiptap-demo name="Nodes/Image"></tiptap-demo>

2
docs/src/docPages/api/nodes/list-item.md
View File

@@ -29,4 +29,4 @@ This extension requires the [`BulletList`](/api/nodes/bullet-list) or [`OrderedL
[packages/extension-list-item/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-list-item/)
## Usage
<demo name="Nodes/ListItem" highlight="3-8,20-22,41-43" />
<tiptap-demo name="Nodes/ListItem"></tiptap-demo>

2
docs/src/docPages/api/nodes/mention.md
View File

@@ -67,4 +67,4 @@ It’s also possible to use Vanilla JavaScript, but that is probably a lot more
[packages/extension-mention/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-mention/)
## Usage
<demo name="Nodes/Mention" />
<tiptap-demo name="Nodes/Mention"></tiptap-demo>

2
docs/src/docPages/api/nodes/ordered-list.md
View File

@@ -35,4 +35,4 @@ This extension requires the [`ListItem`](/api/nodes/list-item) node.
[packages/extension-ordered-list/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-ordered-list/)
## Usage
<demo name="Nodes/OrderedList" highlight="3-5,17-18,37-38" />
<tiptap-demo name="Nodes/OrderedList"></tiptap-demo>

2
docs/src/docPages/api/nodes/paragraph.md
View File

@@ -35,4 +35,4 @@ yarn add @tiptap/extension-paragraph
[packages/extension-paragraph/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-paragraph/)
## Usage
<demo name="Nodes/Paragraph" highlight="11,29" />
<tiptap-demo name="Nodes/Paragraph"></tiptap-demo>

2
docs/src/docPages/api/nodes/table-cell.md
View File

@@ -19,4 +19,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
<demo name="Nodes/Table" />
<tiptap-demo name="Nodes/Table"></tiptap-demo>

2
docs/src/docPages/api/nodes/table-header.md
View File

@@ -35,4 +35,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
<demo name="Nodes/Table" />
<tiptap-demo name="Nodes/Table"></tiptap-demo>

2
docs/src/docPages/api/nodes/table-row.md
View File

@@ -19,4 +19,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
<demo name="Nodes/Table" />
<tiptap-demo name="Nodes/Table"></tiptap-demo>

2
docs/src/docPages/api/nodes/table.md
View File

@@ -55,4 +55,4 @@ This extension requires the [`TableRow`](/api/nodes/table-row), [`TableHeader`](
[packages/extension-table/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-table/)
## Usage
<demo name="Nodes/Table" />
<tiptap-demo name="Nodes/Table"></tiptap-demo>

2
docs/src/docPages/api/nodes/task-item.md
View File

@@ -29,4 +29,4 @@ This extension requires the [`TaskList`](/api/nodes/task-list) node.
[packages/extension-task-item/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-task-item/)
## Usage
<demo name="Nodes/TaskItem" />
<tiptap-demo name="Nodes/TaskItem"></tiptap-demo>

2
docs/src/docPages/api/nodes/task-list.md
View File

@@ -35,4 +35,4 @@ This extension requires the [`TaskItem`](/api/nodes/task-item) extension.
[packages/extension-task-list/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-task-list/)
## Usage
<demo name="Nodes/TaskList" highlight="3-5,17-18,37-38" />
<tiptap-demo name="Nodes/TaskList"></tiptap-demo>

2
docs/src/docPages/api/nodes/text.md
View File

@@ -21,4 +21,4 @@ yarn add @tiptap/extension-text
[packages/extension-text/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-text/)
## Usage
<demo name="Nodes/Text" highlight="12,30" />
<tiptap-demo name="Nodes/Text"></tiptap-demo>

4
docs/src/docPages/api/utilities/html.md
View File

@@ -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
<demo name="Guide/Content/GenerateHTML" highlight="6-7,42-48"/>
<tiptap-demo name="GuideContent/GenerateHTML"></tiptap-demo>
## Generate JSON from HTML
<demo name="Guide/Content/GenerateJSON" highlight="6-7,18-24"/>
<tiptap-demo name="GuideContent/GenerateJSON"></tiptap-demo>

5
docs/src/docPages/examples/book.md
View File

@@ -4,7 +4,4 @@ This demo has 250 paragraphs and more than 22,000 words, check the performance y
Most of the processing is needed to check the active state of the buttons for the selection. If you’d like to optimize for really long texts, try to limit these checks in your toolbar. But honestly, we think it’s great already, isn’t it?
<demos :items="{
Vue: 'Examples/Book/Vue',
React: 'Examples/Book/React',
}" />
<tiptap-demo name="Examples/Book"></tiptap-demo>

2
docs/src/docPages/examples/collaborative-editing.md
View File

@@ -20,7 +20,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.
:::
<demo name="Examples/CollaborativeEditing" />
<tiptap-demo name="Examples/CollaborativeEditing"></tiptap-demo>
## 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:

5
docs/src/docPages/examples/default.md
View File

@@ -1,7 +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.
<demos :items="{
Vue: 'Examples/Default/Vue',
React: 'Examples/Default/React',
}" />
<tiptap-demo name="Examples/Default"></tiptap-demo>

2
docs/src/docPages/examples/drawing.md
View File

@@ -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).
<demo name="Examples/Drawing" />
<tiptap-demo name="Examples/Drawing"></tiptap-demo>

5
docs/src/docPages/examples/formatting.md
View File

@@ -1,6 +1,3 @@
# Formatting
<demos :items="{
Vue: 'Examples/Formatting/Vue',
React: 'Examples/Formatting/React',
}" />
<tiptap-demo name="Examples/Formatting"></tiptap-demo>

5
docs/src/docPages/examples/images.md
View File

@@ -8,7 +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)
:::
<demos :items="{
Vue: 'Examples/Images/Vue',
React: 'Examples/Images/React',
}" />
<tiptap-demo name="Examples/Images"></tiptap-demo>

10
docs/src/docPages/examples/interactivity.md
View File

@@ -2,12 +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.
<demos :items="{
Vue: 'Guide/NodeViews/VueComponent',
React: 'Guide/NodeViews/ReactComponent',
}" />
<tiptap-demo name="GuideNodeViews/VueComponent"></tiptap-demo>
<demos :items="{
Vue: 'Guide/NodeViews/VueComponentContent',
React: 'Guide/NodeViews/ReactComponentContent',
}" />
<tiptap-demo name="GuideNodeViews/VueComponentContent"></tiptap-demo>

5
docs/src/docPages/examples/markdown-shortcuts.md
View File

@@ -1,6 +1,3 @@
# Markdown shortcuts
<demos :items="{
Vue: 'Examples/MarkdownShortcuts/Vue',
React: 'Examples/MarkdownShortcuts/React',
}" />
<tiptap-demo name="Examples/MarkdownShortcuts"></tiptap-demo>

5
docs/src/docPages/examples/menus.md
View File

@@ -1,6 +1,3 @@
# Menus
<demos :items="{
Vue: 'Examples/Menus/Vue',
React: 'Examples/Menus/React',
}" />
<tiptap-demo name="Examples/Menus"></tiptap-demo>

5
docs/src/docPages/examples/minimal.md
View File

@@ -1,6 +1,3 @@
# Minimal setup
<demos :items="{
Vue: 'Examples/Minimal/Vue',
React: 'Examples/Minimal/React',
}" />
<tiptap-demo name="Examples/Minimal"></tiptap-demo>

2
docs/src/docPages/examples/savvy.md
View File

@@ -1,3 +1,3 @@
# A clever editor
<demo name="Examples/Savvy" />
<tiptap-demo name="Examples/Savvy"></tiptap-demo>

5
docs/src/docPages/examples/suggestions.md
View File

@@ -1,6 +1,3 @@
# Mentions
<demos :items="{
Vue: 'Examples/Community/Vue',
React: 'Examples/Community/React',
}" />
<tiptap-demo name="Examples/Community"></tiptap-demo>

5
docs/src/docPages/examples/syntax-highlighting.md
View File

@@ -1,6 +1,3 @@
# Syntax highlighting
<demos :items="{
Vue: 'Examples/CodeBlockLanguage/Vue',
React: 'Examples/CodeBlockLanguage/React',
}" />
<tiptap-demo name="Examples/CodeBlockLanguage"></tiptap-demo>

5
docs/src/docPages/examples/tables.md
View File

@@ -4,7 +4,4 @@
Using this extension in a commercial project? [Become a sponsor](/sponsor) to fund its development!
:::
<demos :items="{
Vue: 'Examples/Tables/Vue',
React: 'Examples/Tables/React',
}" />
<tiptap-demo name="Examples/Tables"></tiptap-demo>

5
docs/src/docPages/examples/tasks.md
View File

@@ -1,6 +1,3 @@
# Tasks
<demos :items="{
Vue: 'Examples/Tasks/Vue',
React: 'Examples/Tasks/React',
}" />
<tiptap-demo name="Examples/Tasks"></tiptap-demo>

2
docs/src/docPages/experiments/collaboration-annotation.md
View File

@@ -43,4 +43,4 @@ This extension requires the [`Collaboration`](/api/extensions/collaboration) ext
[packages/extension-collaboration-annotation/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-collaboration-annotation/) -->
## Usage
<demo name="Experiments/CollaborationAnnotation" />
<tiptap-demo name="Experiments/CollaborationAnnotation"></tiptap-demo>

2
docs/src/docPages/experiments/commands.md
View File

@@ -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.
<demo name="Experiments/Commands" />
<tiptap-demo name="Experiments/Commands"></tiptap-demo>

2
docs/src/docPages/experiments/details.md
View File

@@ -5,4 +5,4 @@
## Issues
* Nested lists cause trouble
<demo name="Experiments/Details" />
<tiptap-demo name="Experiments/Details"></tiptap-demo>

2
docs/src/docPages/experiments/embeds.md
View File

@@ -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.
<demo name="Experiments/Embeds" />
<tiptap-demo name="Experiments/Embeds"></tiptap-demo>

2
docs/src/docPages/experiments/figure.md
View File

@@ -9,4 +9,4 @@
## Issues
* The current implementation works with images only.
<demo name="Experiments/Figure" />
<tiptap-demo name="Experiments/Figure"></tiptap-demo>

2
docs/src/docPages/experiments/generic-figure.md
View File

@@ -2,4 +2,4 @@
⚠️ Experiment
<demo name="Experiments/GenericFigure" />
<tiptap-demo name="Experiments/GenericFigure"></tiptap-demo>

2
docs/src/docPages/experiments/global-drag-handle.md
View File

@@ -5,4 +5,4 @@
## Issues
* We’re working on a better, more solid implementation. :) Give us some more time, and please, don’t ask when it’s ready. The best thing to speed up the development is to [sponsor our work](/sponsor) on GitHub.
<demo name="Experiments/GlobalDragHandle" />
<tiptap-demo name="Experiments/GlobalDragHandle"></tiptap-demo>

2
docs/src/docPages/experiments/linter.md
View File

@@ -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.
<demo name="Experiments/Linter" />
<tiptap-demo name="Experiments/Linter"></tiptap-demo>

2
docs/src/docPages/experiments/multiple-editors.md
View File

@@ -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.
<demo name="Experiments/MultipleEditors" />
<tiptap-demo name="Experiments/MultipleEditors"></tiptap-demo>

2
docs/src/docPages/experiments/trailing-node.md
View File

@@ -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.
<demo name="Experiments/TrailingNode" />
<tiptap-demo name="Experiments/TrailingNode"></tiptap-demo>

16
docs/src/docPages/guide/menus.md
View File

@@ -18,24 +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.
<demos
:items="{
Vue: 'Extensions/BubbleMenu/Vue',
React: 'Extensions/BubbleMenu/React',
}"
hide-source
/>
<tiptap-demo name="Extensions/BubbleMenu" hideSource></tiptap-demo>
### Floating menu
The [floating menu](/api/extensions/floating-menu) appears in empty lines. Markup and styling is totally up to you.
<demos
:items="{
Vue: 'Extensions/FloatingMenu/Vue',
React: 'Extensions/FloatingMenu/React',
}"
hide-source
/>
<tiptap-demo name="Extensions/FloatingMenu" hideSource></tiptap-demo>
### 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’ll allow you to start a new line with `/` and will bring up a popup to select which node should be added.

6
docs/src/docPages/guide/node-views/examples.md
View File

@@ -14,16 +14,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.
<demo name="Guide/NodeViews/DragHandle" />
<tiptap-demo name="GuideNodeViews/DragHandle"></tiptap-demo>
## Table of contents
This one loops through the editor content, gives all headings an ID and renders a Table of Contents with Vue.
<demo name="Guide/NodeViews/TableOfContents" />
<tiptap-demo name="GuideNodeViews/TableOfContents"></tiptap-demo>
## Drawing in the editor
The drawing example shows a SVG that enables you to draw inside the editor.
<demo name="Examples/Drawing" />
<tiptap-demo name="Examples/Drawing"></tiptap-demo>
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.

4
docs/src/docPages/guide/node-views/js.md
View File

@@ -42,7 +42,7 @@ export default Node.create({
Got it? Let’s see it in action. Feel free to copy the below example to get started.
<demo name="Guide/NodeViews/JavaScript" />
<tiptap-demo name="GuideNodeViews/JavaScript"></tiptap-demo>
That node view even interacts with the editor. Time to see how that is wired up.
@@ -120,6 +120,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:
<demo name="Guide/NodeViews/JavaScriptContent" />
<tiptap-demo name="GuideNodeViews/JavaScriptContent"></tiptap-demo>
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).

6
docs/src/docPages/guide/node-views/react.md
View File

@@ -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.
<demo name="Guide/NodeViews/ReactComponent" />
<tiptap-demo name="GuideNodeViews/ReactComponent"></tiptap-demo>
That component doesn’t interact with the editor, though. Time to wire it up.
@@ -92,7 +92,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:
<demo name="Guide/NodeViews/ReactComponentContent" />
<tiptap-demo name="GuideNodeViews/ReactComponentContent"></tiptap-demo>
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).
@@ -115,4 +115,4 @@ Here is the full list of what props you can expect:
## 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.
<!-- <demo name="Guide/NodeViews/DragHandle" /> -->
<!-- <tiptap-demo name="GuideNodeViews/DragHandle"></tiptap-demo> -->

6
docs/src/docPages/guide/node-views/vue.md
View File

@@ -46,7 +46,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.
<demo name="Guide/NodeViews/VueComponent" />
<tiptap-demo name="GuideNodeViews/VueComponent"></tiptap-demo>
That component doesn’t interact with the editor, though. Time to wire it up.
@@ -114,7 +114,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:
<demo name="Guide/NodeViews/VueComponentContent" />
<tiptap-demo name="GuideNodeViews/VueComponentContent"></tiptap-demo>
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).
@@ -202,4 +202,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.
<demo name="Guide/NodeViews/DragHandle" />
<tiptap-demo name="GuideNodeViews/DragHandle"></tiptap-demo>

10
docs/src/docPages/guide/output.md
View File

@@ -44,7 +44,7 @@ editor.commands.setContent({
Here is an interactive example where you can see that in action:
<demo name="Guide/Content/ExportJSON" hide-source/>
<tiptap-demo name="GuideContent/ExportJSON" hideSource></tiptap-demo>
### 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:
@@ -68,7 +68,7 @@ editor.commands.setContent(`<p>Example Text</p>`)
Use this interactive example to fiddle around:
<demo name="Guide/Content/ExportHTML" hide-source/>
<tiptap-demo name="GuideContent/ExportHTML" hideSource></tiptap-demo>
### 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).
@@ -114,18 +114,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.
<demo name="Guide/Content/ReadOnly" highlight="3-6,22,28,42-46" />
<tiptap-demo name="GuideContent/ReadOnly"></tiptap-demo>
### 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.
<demo name="Guide/Content/GenerateHTML" highlight="6-7,42-48" />
<tiptap-demo name="GuideContent/GenerateHTML"></tiptap-demo>
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"/>
<tiptap-demo name="GuideContent/GenerateJSON"></tiptap-demo>
## 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.

2
docs/src/docPages/installation/nuxt.md
View File

@@ -101,4 +101,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:
<demo name="Guide/GettingStarted/VModel" />
<tiptap-demo name="GuideGettingStarted/VModel"></tiptap-demo>

2
docs/src/docPages/installation/react.md
View File

@@ -87,4 +87,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:
<demo name="Examples/Default/React" />
<tiptap-demo name="Examples/Default"></tiptap-demo>

2
docs/src/docPages/installation/vue2.md
View File

@@ -109,4 +109,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:
<demo name="Guide/GettingStarted/VModel" />
<tiptap-demo name="GuideGettingStarted/VModel"></tiptap-demo>

1
docs/src/main.js
View File

@@ -5,6 +5,7 @@ import 'prismjs/components/prism-scss.js'
import PortalVue from 'portal-vue'
import iframeResize from 'iframe-resizer/js/iframeResizer'
import App from '~/layouts/App'
import './TiptapDemo'
Prism.manual = true

4
docs/src/pages/index.vue
View File

@@ -25,7 +25,9 @@
</app-section>
<app-section>
<demo name="Examples/CollaborativeEditing" inline />
<div style="margin: -1rem">
<tiptap-demo name="Examples/CollaborativeEditing" inline />
</div>
</app-section>
<app-section>