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

4
docs/guide/menus.md
View File

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

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

10
docs/guide/output.md
View File

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