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

docs: replace embeds with just the URL

Browse Source
This commit is contained in:
Hans Pagel
2021-10-18 18:01:47 +02:00
parent 43a944b897
commit 53f815a53c
79 changed files with 96 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

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

6
docs/guide/node-views/vue.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.
<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