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

fix some examples

Browse Source
This commit is contained in:
Philipp Kühn
2018-10-23 22:50:12 +02:00
parent aecf2284e9
commit b7e915015c
5 changed files with 201 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
examples/Components/Routes/MarkdownShortcuts/index.vue
View File

@@ -1,26 +1,12 @@
<template>
<div>
<editor class="editor" :extensions="extensions">
<div class="editor__content" slot="content" slot-scope="props">
<h2>
Markdown Shortcuts
</h2>
<p>
Start a new line and type <code>#</code> followed by a <code>space</code> and you will get an H1 headline.
</p>
<p>
This feature is called <strong>input rules</strong>. There are some of these shortcuts for the most basic nodes enabled by default. Try <code>#, ##, ###, …</code> for headlines, <code>></code> for blockquotes, <code>- or +</code> for bullet lists. And of course you can add your own input rules.
</p>
</div>
</editor>
<div class="editor">
<editor-content class="editor__content" :editor="editor" />
</div>
</template>
<script>
import Icon from 'Components/Icon'
import { Editor } from 'tiptap'
import { Editor, EditorContent } from 'tiptap'
import {
BlockquoteNode,
BulletListNode,
@@ -40,11 +26,12 @@ import {
export default {
components: {
Editor,
EditorContent,
Icon,
},
data() {
return {
editor: new Editor({
extensions: [
new BlockquoteNode(),
new BulletListNode(),
@@ -61,7 +48,22 @@ export default {
new LinkMark(),
new HistoryExtension(),
],
content: `
<h2>
Markdown Shortcuts
</h2>
<p>
Start a new line and type <code>#</code> followed by a <code>space</code> and you will get an H1 headline.
</p>
<p>
This feature is called <strong>input rules</strong>. There are some of these shortcuts for the most basic nodes enabled by default. Try <code>#, ##, ###, …</code> for headlines, <code>></code> for blockquotes, <code>- or +</code> for bullet lists. And of course you can add your own input rules.
</p>
`,
}),
}
},
beforeDestroy() {
this.editor.destroy()
},
}
</script>

15
examples/Components/Routes/Placeholder/index.vue
View File

@@ -1,13 +1,11 @@
<template>
<div>
<editor class="editor" :extensions="extensions">
<div class="editor__content" slot="content" slot-scope="props"></div>
</editor>
<div class="editor">
<editor-content class="editor__content" :editor="editor" />
</div>
</template>
<script>
import { Editor } from 'tiptap'
import { Editor, EditorContent } from 'tiptap'
import {
BulletListNode,
ListItemNode,
@@ -16,10 +14,11 @@ import {
export default {
components: {
Editor,
EditorContent,
},
data() {
return {
editor: new Editor({
extensions: [
new BulletListNode(),
new ListItemNode(),
@@ -27,8 +26,12 @@ export default {
emptyNodeClass: 'is-empty',
}),
],
}),
}
},
beforeDestroy() {
this.editor.destroy()
},
}
</script>

33
examples/Components/Routes/ReadOnly/index.vue
View File

@@ -1,22 +1,11 @@
<template>
<div>
<editor :editable="false" :extensions="extensions" class="editor">
<div class="editor__content" slot="content" slot-scope="props">
<h2>
Read-Only
</h2>
<p>
This text is <strong>read-only</strong>. You are not able to edit something. <a href="https://scrumpy.io/">Links to fancy websites</a> are still working.
</p>
</div>
</editor>
<div class="editor">
<editor-content class="editor__content" :editor="editor" />
</div>
</template>
<script>
import { Editor } from 'tiptap'
import { Editor, EditorContent } from 'tiptap'
import {
HardBreakNode,
HeadingNode,
@@ -28,10 +17,12 @@ import {
export default {
components: {
Editor,
EditorContent,
},
data() {
return {
editor: new Editor({
editable: false,
extensions: [
new HardBreakNode(),
new HeadingNode({ maxLevel: 3 }),
@@ -40,7 +31,19 @@ export default {
new ItalicMark(),
new LinkMark(),
],
content: `
<h2>
Read-Only
</h2>
<p>
This text is <strong>read-only</strong>. You are not able to edit something. <a href="https://scrumpy.io/">Links to fancy websites</a> are still working.
</p>
`,
}),
}
},
beforeDestroy() {
this.editor.destroy()
},
}
</script>

41
examples/Components/Routes/TextAlign/index.vue
View File

@@ -1,9 +1,7 @@
<template>
<div>
<editor class="editor" :extensions="extensions">
<div class="menubar" slot="menubar" slot-scope="{ nodes, marks }">
<div v-if="nodes && marks">
<div class="editor">
<menu-bar class="menubar" :editor="editor">
<template slot-scope="{ nodes, marks }">
<button
class="menubar__button"
@@ -29,25 +27,16 @@
<icon name="align-right" />
</button>
</div>
</div>
</template>
</menu-bar>
<div class="editor__content" slot="content" slot-scope="props">
<p style="text-align: left">
Maybe you want to implement text alignment. If so, you're able to overwrite the default <code>ParagraphNode</code>. You can define some classes oder inline styles in your schema to achive that.
</p>
<p style="text-align: right">
Have fun! 🙌
</p>
</div>
</editor>
<editor-content class="editor__content" :editor="editor" />
</div>
</template>
<script>
import Icon from 'Components/Icon'
import { Editor } from 'tiptap'
import { Editor, EditorContent, MenuBar } from 'tiptap'
import {
HardBreakNode,
CodeMark,
@@ -56,18 +45,32 @@ import ParagraphAlignmentNode from './Paragraph.js'
export default {
components: {
Editor,
EditorContent,
MenuBar,
Icon,
},
data() {
return {
editor: new Editor({
extensions: [
new HardBreakNode(),
new CodeMark(),
new ParagraphAlignmentNode(),
],
content: `
<p style="text-align: left">
Maybe you want to implement text alignment. If so, you're able to overwrite the default <code>ParagraphNode</code>. You can define some classes oder inline styles in your schema to achive that.
</p>
<p style="text-align: right">
Have fun! 🙌
</p>
`,
}),
}
},
beforeDestroy() {
this.editor.destroy()
},
}
</script>

94
examples/Components/Routes/TodoList/index.vue
View File

@@ -1,9 +1,7 @@
<template>
<div>
<editor :extensions="extensions" class="editor">
<div class="menubar" slot="menubar" slot-scope="{ nodes, marks }">
<div v-if="nodes && marks">
<div class="editor">
<menu-bar class="menubar" :editor="editor">
<template slot-scope="{ nodes, marks }">
<button
class="menubar__button"
@@ -37,10 +35,47 @@
<icon name="checklist" />
</button>
</div>
</div>
</template>
</menu-bar>
<div class="editor__content" slot="content" slot-scope="props">
<editor-content class="editor__content" :editor="editor" />
</div>
</template>
<script>
import Icon from 'Components/Icon'
import { Editor, EditorContent, MenuBar } from 'tiptap'
import {
CodeBlockNode,
HardBreakNode,
HeadingNode,
TodoItemNode,
TodoListNode,
BoldMark,
CodeMark,
ItalicMark,
} from 'tiptap-extensions'
export default {
components: {
EditorContent,
MenuBar,
Icon,
},
data() {
return {
editor: new Editor({
extensions: [
new CodeBlockNode(),
new HardBreakNode(),
new HeadingNode({ maxLevel: 3 }),
new TodoItemNode(),
new TodoListNode(),
new BoldMark(),
new CodeMark(),
new ItalicMark(),
],
content: `
<h2>
Todo List
</h2>
@@ -61,46 +96,13 @@
Call mom
</li>
</ul>
</div>
</editor>
</div>
</template>
<script>
import Icon from 'Components/Icon'
import { Editor } from 'tiptap'
import {
CodeBlockNode,
HardBreakNode,
HeadingNode,
TodoItemNode,
TodoListNode,
BoldMark,
CodeMark,
ItalicMark,
} from 'tiptap-extensions'
export default {
components: {
Editor,
Icon,
},
data() {
return {
customProp: 2,
extensions: [
new CodeBlockNode(),
new HardBreakNode(),
new HeadingNode({ maxLevel: 3 }),
new TodoItemNode(),
new TodoListNode(),
new BoldMark(),
new CodeMark(),
new ItalicMark(),
],
`,
}),
}
},
beforeDestroy() {
this.editor.destroy()
},
}
</script>