diff --git a/docs/src/demos/Api/Schema/index.vue b/docs/src/demos/Api/Schema/GenerateHtml/index.vue
similarity index 70%
rename from docs/src/demos/Api/Schema/index.vue
rename to docs/src/demos/Api/Schema/GenerateHtml/index.vue
index a2d47419..5673dcd2 100644
--- a/docs/src/demos/Api/Schema/index.vue
+++ b/docs/src/demos/Api/Schema/GenerateHtml/index.vue
@@ -11,30 +11,26 @@ import Text from '@tiptap/extension-text'
export default {
data() {
return {
- doc: {
+ json: {
type: 'document',
content: [{
type: 'paragraph',
- attrs: {
- align: 'left',
- },
content: [{
type: 'text',
text: 'Example Text',
}],
}],
},
+ html: '',
}
},
- computed: {
- html() {
- return generateHtml(this.doc, [
- Document(),
- Paragraph(),
- Text(),
- ])
- },
+ mounted() {
+ this.html = generateHtml(this.json, [
+ Document(),
+ Paragraph(),
+ Text(),
+ ])
},
}
diff --git a/docs/src/docPages/api/schema.md b/docs/src/docPages/api/schema.md
index 0acc3fa7..015df58a 100644
--- a/docs/src/docPages/api/schema.md
+++ b/docs/src/docPages/api/schema.md
@@ -71,3 +71,9 @@ class Text extends Node {
}
}
```
+
+## Difference between a Node and a Mark
+
+*Nodes* are like blocks of content, for example paragraphs, headlines, code blocks, blockquotes and many more.
+
+*Marks* can apply a different style to specific parts of text inside a *Node*. That’s the case for **bold**, *italic* or ~~striked~~ text. [Links](#) are *Marks*, too.
diff --git a/docs/src/docPages/api/schema/generate-html.md b/docs/src/docPages/api/schema/generate-html.md
index 5f15647d..6f6b7740 100644
--- a/docs/src/docPages/api/schema/generate-html.md
+++ b/docs/src/docPages/api/schema/generate-html.md
@@ -2,11 +2,13 @@
If you need to render the content on the server side, e. g. for a blog post that was written with tiptap, you’ll probably need a way to do just that without an actual editor instance.
+That’s what `generateHtml()` is for. It’s a utility function that renders HTML without an actual editor instance.
+
:::warning Work in progress
-Currently, that works only in the browser (client side), but we’re working on making this available to Node.js (to use it on the server side).
+Currently, that works only in the browser (client side), but we plan to bring this to Node.js (to use it on the server side).
:::
-
+
## Converting JSON<>HTML with PHP
diff --git a/docs/src/docPages/guide/build-your-editor.md b/docs/src/docPages/guide/build-your-editor.md
index 04b805bf..611f9c65 100644
--- a/docs/src/docPages/guide/build-your-editor.md
+++ b/docs/src/docPages/guide/build-your-editor.md
@@ -25,22 +25,3 @@ Note that `Document`, `Paragraph` and `Text` are required. Otherwise you won’t
That’s also the place where you can register custom extensions, which you or someone else built for tiptap.
-
-### Related links
-
-* [List of available commands](/api/commands)
-* [List of available extensions](/api/extensions)
-* Build custom extensions
-
-## Difference between nodes and marks
-
-tiptap used a JSON schema under the hood. Every part of the text is stored as a specific type. There is a `Document` type (it’s needed, but invisible – like the `` in HTML).
-
-*Nodes* are like blocks of content, for example a paragraph or a headline. Yes, this paragraph is a node.
-
-*Marks* can apply a different style to parts of text inside a node. A good example is **bold text**. That’s a mark. *Italic*, `inline code` or [links](#) are marks too.
-
-### Related links
-
-* [Learn more about the schema](/api/schema)
-* [List of available extensions](/api/extensions)
\ No newline at end of file