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

docs: move examples around

Browse Source
This commit is contained in:
Hans Pagel
2020-11-30 15:58:05 +01:00
parent aeb3ba947d
commit df5d5a4f37
8 changed files with 208 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
docs/src/demos/Guide/StoreContent/ExportHTML/index.spec.js Normal file
View File

@@ -0,0 +1,19 @@
context('/guide/store-content', () => {
before(() => {
cy.visit('/guide/store-content')
})
beforeEach(() => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.commands.setContent('<p>Example Text</p>')
})
})
it('should return html', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
const html = editor.getHTML()
expect(html).to.equal('<p>Example Text</p>')
})
})
})

157
docs/src/demos/Guide/StoreContent/ExportHTML/index.vue Normal file
View File

@@ -0,0 +1,157 @@
<template>
<div>
<div class="actions" v-if="editor">
<button class="button" @click="setContent">
Set Content
</button>
<button class="button" @click="clearContent">
Clear Content
</button>
<button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
Bold
</button>
<button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
Italic
</button>
</div>
<editor-content :editor="editor" />
<div class="export">
<h3>HTML</h3>
<pre><code>{{ html }}</code></pre>
</div>
</div>
</template>
<script>
import { Editor, EditorContent, defaultExtensions } from '@tiptap/vue-starter-kit'
export default {
components: {
EditorContent,
},
data() {
return {
editor: null,
html: null,
}
},
mounted() {
this.editor = new Editor({
content: `
<p>
Wow, this editor instance exports its content as HTML.
</p>
`,
extensions: defaultExtensions(),
})
// Get the initial content …
this.html = this.editor.getHTML()
// … and get the content after every change.
this.editor.on('update', () => {
this.html = this.editor.getHTML()
})
},
methods: {
setContent() {
// You can pass a HTML document to the editor.
this.editor.commands.setContent(`
<p>
It’s 19871. You can’t turn on a radio, or go to a mall without hearing Olivia Newton-John’s hit song, Physical.
</p>
`, true)
// It’s likely that you’d like to focus the Editor after most commands.
this.editor.commands.focus()
},
clearContent() {
this.editor
.chain()
.clearContent(true)
.focus()
.run()
},
},
beforeDestroy() {
this.editor.destroy()
},
}
</script>
<style lang="scss">
/* Style the export */
.export {
padding: 1rem 0 0;
h3 {
margin: 1rem 0 0.5rem;
}
pre {
border-radius: 5px;
color: #333;
}
code {
display: block;
white-space: pre-wrap;
font-size: 0.8rem;
padding: 0.75rem 1rem;
background-color:#e9ecef;
color: #495057;
}
}
/* Basic editor styles */
.ProseMirror {
> * + * {
margin-top: 0.75em;
}
ul,
ol {
padding: 0 1rem;
}
code {
background-color: rgba(#616161, 0.1);
color: #616161;
}
pre {
background: #0D0D0D;
color: #FFF;
font-family: 'JetBrainsMono', monospace;
padding: 0.75rem 1rem;
border-radius: 0.5rem;
code {
color: inherit;
background: none;
font-size: 0.8rem;
}
}
img {
max-width: 100%;
height: auto;
}
hr {
margin: 1rem 0;
}
blockquote {
padding-left: 1rem;
border-left: 2px solid rgba(#0D0D0D, 0.1);
}
}
</style>

8
docs/src/demos/Guide/StoreContent/index.spec.js → docs/src/demos/Guide/StoreContent/ExportJSON/index.spec.js
View File

@@ -29,12 +29,4 @@ context('/guide/store-content', () => {
})
})
})
it('should return html', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
const html = editor.getHTML()
expect(html).to.equal('<p>Example Text</p>')
})
})
})

15
docs/src/demos/Guide/StoreContent/index.vue → docs/src/demos/Guide/StoreContent/ExportJSON/index.vue
View File

@@ -18,8 +18,6 @@
<editor-content :editor="editor" />
<div class="export">
<h3>HTML</h3>
<pre><code>{{ html }}</code></pre>
<h3>JSON</h3>
<pre><code v-html="json" /></pre>
</div>
@@ -38,7 +36,6 @@ export default {
return {
editor: null,
json: null,
html: null,
}
},
@@ -46,10 +43,7 @@ export default {
this.editor = new Editor({
content: `
<p>
What would be a text editor without content. At some point you want to get the content out of the editor and yes, we got you covered. There are two methods to export the current document as <code>HTML</code> or <code>JSON</code>.
</p>
<p>
You can hook into the <code>update</code> event to get the content after every single change. How cool is that?
Wow, this editor instance exports its content as JSON.
</p>
`,
extensions: defaultExtensions(),
@@ -57,18 +51,16 @@ export default {
// Get the initial content …
this.json = this.editor.getJSON()
this.html = this.editor.getHTML()
// … and get the content after every change.
this.editor.on('update', () => {
this.json = this.editor.getJSON()
this.html = this.editor.getHTML()
})
},
methods: {
setContent() {
// You can pass a JSON document …
// You can pass a JSON document to the editor.
this.editor.commands.setContent({
type: 'document',
content: [{
@@ -82,9 +74,6 @@ export default {
}],
}, true)
// … but HTML strings are also supported.
// this.editor.setContent('<p>This is some inserted text. 👋</p>')
// It’s likely that you’d like to focus the Editor after most commands.
this.editor.commands.focus()
},

4
docs/src/demos/Examples/ReadOnly/index.spec.js → docs/src/demos/Guide/StoreContent/ReadOnly/index.spec.js
View File

@@ -1,6 +1,6 @@
context('/examples/read-only', () => {
context('/guide/store-content', () => {
beforeEach(() => {
cy.visit('/examples/read-only')
cy.visit('/guide/store-content')
})
it.skip('should be read-only', () => {

0
docs/src/demos/Examples/ReadOnly/index.vue → docs/src/demos/Guide/StoreContent/ReadOnly/index.vue
View File

53
docs/src/docPages/guide/store-content.md
View File

@@ -5,10 +5,9 @@
## Introduction
You can store your content as a JSON object or as a good old HTML string. Both work fine. And of course, you can pass both formats to the editor to restore your content. Here is an interactive example, that exports the content as HTML and JSON when the document is changed:
## Example
<demo name="Guide/StoreContent" highlight="52-60"/>
## Export
## Option 1: JSON
### Option 1: JSON
JSON is probably easier to loop through, for example to look for a mention and it’s more like what tiptap uses under the hood. Anyway, if you want to use JSON to store the content we provide a method to retrieve the content as JSON:
```js
@@ -19,19 +18,10 @@ You can store that in your database (or send it to an API) and restore the docum
```js
new Editor({
// …
content: {
"type": "document",
"content": [
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "Example Text"
}
]
}
// …
]
},
})
@@ -43,20 +33,16 @@ Or if you need to wait for something, you can do it later through the editor ins
editor.setContent({
"type": "document",
"content": [
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "Example Text"
}
]
}
// …
]
})
```
## Option 2: HTML
Here is an interactive example where you can see that in action:
<demo name="Guide/StoreContent/ExportJSON" :show-source="false"/>
### 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:
```js
@@ -67,7 +53,6 @@ This can then be used to restore the document initially:
```js
new Editor({
// …
content: `<p>Example Text</p>`,
})
```
@@ -77,7 +62,11 @@ Or if you want to restore the content later (e. g. after an API call has finishe
editor.commands.setContent(`<p>Example Text</p>`)
```
## Not an option: Markdown
Use this interactive example to fiddle around:
<demo name="Guide/StoreContent/ExportHTML" :show-source="false"/>
### Not an option: Markdown
Unfortunately, **tiptap doesn’t support Markdown as an input or output format**. We considered to add support for it, but those are the reasons why we decided to not do it:
@@ -91,10 +80,18 @@ If you still think you need Markdown, ProseMirror has an [example on how to deal
That said, tiptap does support [Markdown shortcuts](/examples/markdown-shortcuts) to format your content.
## 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 a way to do just that without an actual editor instance.
## Rendering
That’s what the `generateHTML()` is for. It’s a utility function that renders HTML without an actual editor instance. As an alternative, you can also use tiptap in a [read-only mode](/examples/read-only).
### 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/StoreContent/ReadOnly" highlight="3-6,22,28,41-47" />
### 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.
:::info Browser-only rendering
Import a lightweight implementation of `generateHTML()` from `@tiptap/core` if you’re using the function in a browser context only.

5
docs/src/links.yaml
View File

@@ -22,8 +22,9 @@
pro: true
- title: Markdown shortcuts
link: /examples/markdown-shortcuts
# - title: Formatting
# link: /examples/formatting
- title: Formatting
link: /examples/formatting
draft: true
- title: Todo app
link: /examples/todo-app
- title: Write a book