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

improve the examples

Browse Source
This commit is contained in:
Hans Pagel
2020-09-24 17:56:42 +02:00
parent b718061de9
commit 26d808e1ba
13 changed files with 49 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
docs/src/demos/Examples/ExportHtmlOrJson/index.spec.js
View File

@@ -1,8 +1,14 @@
context('/examples/export-html-or-json', () => {
beforeEach(() => {
before(() => {
cy.visit('/examples/export-html-or-json')
})
beforeEach(() => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent('<p>Example Text</p>')
})
})
it('should return json', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
const json = editor.json()
@@ -15,33 +21,7 @@ context('/examples/export-html-or-json', () => {
content: [
{
type: 'text',
text: 'You are able to export your data as ',
},
{
type: 'text',
marks: [
{
type: 'code',
},
],
text: 'HTML',
},
{
type: 'text',
text: ' or ',
},
{
type: 'text',
marks: [
{
type: 'code',
},
],
text: 'JSON',
},
{
type: 'text',
text: '.',
text: 'Example Text',
},
],
},
@@ -54,7 +34,7 @@ context('/examples/export-html-or-json', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
const html = editor.html()
expect(html).to.equal('<p>You are able to export your data as <code>HTML</code> or <code>JSON</code>.</p>')
expect(html).to.equal('<p>Example Text</p>')
})
})
})

14
docs/src/demos/Examples/ExportHtmlOrJson/index.vue
View File

@@ -1,7 +1,5 @@
<template>
<div>
<editor-content :editor="editor" />
<div class="actions">
<button class="button" @click="clearContent">
Clear Content
@@ -11,12 +9,13 @@
</button>
</div>
<div class="export">
<h3>JSON</h3>
<pre><code v-html="json"></code></pre>
<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>
</div>
</template>
@@ -41,7 +40,10 @@ export default {
this.editor = new Editor({
content: `
<p>
You are able to export your data as <code>HTML</code> or <code>JSON</code>.
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?
</p>
`,
extensions: defaultExtensions(),

8
docs/src/demos/Examples/ExportHtmlOrJson/style.scss
View File

@@ -1,12 +1,16 @@
.export {
h3 {
margin: 0.5rem 0;
}
pre {
border-radius: 5px;
font-size: 0.8rem;
color: rgba($colorBlack, 0.8);
color: #333;
}
code {
display: block;
white-space: pre-wrap;
font-size: 0.8rem;
padding: 1rem;
}
}

8
docs/src/demos/Examples/History/index.vue
View File

@@ -29,11 +29,11 @@ export default {
mounted() {
this.editor = new Editor({
content: `
<h2>
History
</h2>
<p>
Try to change some content here. With the <code>History</code> extension you are able to undo and redo your changes. You can also use keyboard shortcuts for this (<code>Control/Command + Z</code> and <code>Control/Command + Shift + Z</code>).
With the <code>History</code> extension the Editor will keep track of your changes. And if you think you made a mistake, you can redo your changes. Try it out, change the content and hit the undo button!
</p>
<p>
And yes, you can also use a keyboard shortcut to undo changes (<code>Control/Cmd</code> <code>Z</code>) or redo changes (<code>Control/Cmd</code> <code>Shift</code> <code>Z</code>).
</p>
`,
extensions: defaultExtensions(),

6
docs/src/demos/Examples/MarkdownShortcuts/index.vue
View File

@@ -22,13 +22,13 @@ export default {
this.editor = new Editor({
content: `
<p>
Start a new line and type <code>#</code> followed by a space to get a headline. Try <code>#</code>, <code>##</code>, <code>###</code>, <code>####</code>, <code>#####</code>, <code>######</code> for different levels.
Start a new line and type <code>#</code> followed by a space to get a heading. Try <code>#</code>, <code>##</code>, <code>###</code>, <code>####</code>, <code>#####</code>, <code>######</code> for different levels.
</p>
<p>
Those conventions are called <strong>input rules</strong> in tiptap. Some of those shortcuts are enabled by default. Try <code>></code> for blockquotes, <code>*</code>, <code>-</code> or <code>+</code> for bullet lists, <code>\`foobar\`</code> to highlight code.
Those conventions are called <strong>input rules</strong> in tiptap. Some of them are enabled by default. Try <code>></code> for blockquotes, <code>*</code>, <code>-</code> or <code>+</code> for bullet lists, or <code>\`foobar\`</code> to highlight code.
</p>
<p>
You can add your own input rules through adding the <code>inputRules()</code> method in your nodes and marks.
You can add your own input rules to your Nodes and Marks or even to the default ones.
</p>
`,
extensions: defaultExtensions(),

5
docs/src/demos/Examples/Minimalist/index.spec.js Normal file
View File

@@ -0,0 +1,5 @@
context('/examples/minimalist', () => {
before(() => {
cy.visit('/examples/minimalist')
})
})

0
docs/src/demos/Examples/Simple/index.vue → docs/src/demos/Examples/Minimalist/index.vue
View File

4
docs/src/demos/Examples/ReadOnly/style.scss
View File

@@ -5,3 +5,7 @@
margin-right: 0.5rem;
}
}
[contenteditable=false] {
color: #999;
}

5
docs/src/demos/Examples/Simple/index.spec.js
View File

@@ -1,5 +0,0 @@
context('/examples/simple', () => {
before(() => {
cy.visit('/examples/simple')
})
})

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

@@ -4,7 +4,7 @@ Extensions are the way to add functionality to tiptap. By default tiptap comes b
## A minimalist set of extensions
You’ll need at least three extensions: Document, Paragraph and Text. See [an example of a tiptap version for minimalists](/examples/simple).
You’ll need at least three extensions: Document, Paragraph and Text. See [an example of a tiptap version for minimalists](/examples/minimalist).
## Default extensions

3
docs/src/docPages/examples/minimalist.md Normal file
View File

@@ -0,0 +1,3 @@
# Minimalist
<demo name="Examples/Minimalist" highlight="7-9,26-28" />

3
docs/src/docPages/examples/simple.md
View File

@@ -1,3 +0,0 @@
# Simple
<demo name="Examples/Simple" highlight="7-9,26-28" />

8
docs/src/links.yaml
View File

@@ -33,8 +33,6 @@
items:
- title: Basic
link: /examples/basic
- title: Simple
link: /examples/simple
# - title: Menu Bubble
# link: /examples/menu-bubble
# draft: true
@@ -77,8 +75,8 @@
# - title: Placeholder
# link: /examples/placeholder
# draft: true
- title: Focus
link: /examples/focus
# - title: Focus
# link: /examples/focus
# - title: Collaboration
# link: /examples/collaboration
# draft: true
@@ -91,6 +89,8 @@
# - title: Drag Handle
# link: /examples/drag-handle
# draft: true
- title: Minimalist
link: /examples/minimalist
- title: Export HTML or JSON
link: /examples/export-html-or-json