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

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

@@ -1,26 +1,12 @@
<template> <template>
<div> <div class="editor">
<editor class="editor" :extensions="extensions"> <editor-content class="editor__content" :editor="editor" />
<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> </div>
</template> </template>
<script> <script>
import Icon from 'Components/Icon' import Icon from 'Components/Icon'
import { Editor } from 'tiptap' import { Editor, EditorContent } from 'tiptap'
import { import {
BlockquoteNode, BlockquoteNode,
BulletListNode, BulletListNode,
@@ -40,28 +26,44 @@ import {
export default { export default {
components: { components: {
Editor, EditorContent,
Icon, Icon,
}, },
data() { data() {
return { return {
extensions: [ editor: new Editor({
new BlockquoteNode(), extensions: [
new BulletListNode(), new BlockquoteNode(),
new CodeBlockNode(), new BulletListNode(),
new HardBreakNode(), new CodeBlockNode(),
new HeadingNode({ maxLevel: 3 }), new HardBreakNode(),
new ListItemNode(), new HeadingNode({ maxLevel: 3 }),
new OrderedListNode(), new ListItemNode(),
new TodoItemNode(), new OrderedListNode(),
new TodoListNode(), new TodoItemNode(),
new BoldMark(), new TodoListNode(),
new CodeMark(), new BoldMark(),
new ItalicMark(), new CodeMark(),
new LinkMark(), new ItalicMark(),
new HistoryExtension(), 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> </script>

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

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

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

@@ -1,22 +1,11 @@
<template> <template>
<div> <div class="editor">
<editor :editable="false" :extensions="extensions" class="editor"> <editor-content class="editor__content" :editor="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> </div>
</template> </template>
<script> <script>
import { Editor } from 'tiptap' import { Editor, EditorContent } from 'tiptap'
import { import {
HardBreakNode, HardBreakNode,
HeadingNode, HeadingNode,
@@ -28,19 +17,33 @@ import {
export default { export default {
components: { components: {
Editor, EditorContent,
}, },
data() { data() {
return { return {
extensions: [ editor: new Editor({
new HardBreakNode(), editable: false,
new HeadingNode({ maxLevel: 3 }), extensions: [
new BoldMark(), new HardBreakNode(),
new CodeMark(), new HeadingNode({ maxLevel: 3 }),
new ItalicMark(), new BoldMark(),
new LinkMark(), new CodeMark(),
], 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> </script>

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

@@ -1,53 +1,42 @@
<template> <template>
<div> <div class="editor">
<editor class="editor" :extensions="extensions"> <menu-bar class="menubar" :editor="editor">
<template slot-scope="{ nodes, marks }">
<div class="menubar" slot="menubar" slot-scope="{ nodes, marks }"> <button
<div v-if="nodes && marks"> class="menubar__button"
:class="{ 'is-active': nodes.paragraph.active({ textAlign: 'left' }) }"
@click="nodes.paragraph.command({ textAlign: 'left' })"
>
<icon name="align-left" />
</button>
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.paragraph.active({ textAlign: 'left' }) }" :class="{ 'is-active': nodes.paragraph.active({ textAlign: 'center' }) }"
@click="nodes.paragraph.command({ textAlign: 'left' })" @click="nodes.paragraph.command({ textAlign: 'center' })"
> >
<icon name="align-left" /> <icon name="align-center" />
</button> </button>
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.paragraph.active({ textAlign: 'center' }) }" :class="{ 'is-active': nodes.paragraph.active({ textAlign: 'right' }) }"
@click="nodes.paragraph.command({ textAlign: 'center' })" @click="nodes.paragraph.command({ textAlign: 'right' })"
> >
<icon name="align-center" /> <icon name="align-right" />
</button> </button>
</template>
</menu-bar>
<button <editor-content class="editor__content" :editor="editor" />
class="menubar__button"
:class="{ 'is-active': nodes.paragraph.active({ textAlign: 'right' }) }"
@click="nodes.paragraph.command({ textAlign: 'right' })"
>
<icon name="align-right" />
</button>
</div>
</div>
<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>
</div> </div>
</template> </template>
<script> <script>
import Icon from 'Components/Icon' import Icon from 'Components/Icon'
import { Editor } from 'tiptap' import { Editor, EditorContent, MenuBar } from 'tiptap'
import { import {
HardBreakNode, HardBreakNode,
CodeMark, CodeMark,
@@ -56,18 +45,32 @@ import ParagraphAlignmentNode from './Paragraph.js'
export default { export default {
components: { components: {
Editor, EditorContent,
MenuBar,
Icon, Icon,
}, },
data() { data() {
return { return {
extensions: [ editor: new Editor({
new HardBreakNode(), extensions: [
new CodeMark(), new HardBreakNode(),
new ParagraphAlignmentNode(), 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> </script>

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

@@ -1,75 +1,50 @@
<template> <template>
<div> <div class="editor">
<editor :extensions="extensions" class="editor"> <menu-bar class="menubar" :editor="editor">
<template slot-scope="{ nodes, marks }">
<div class="menubar" slot="menubar" slot-scope="{ nodes, marks }"> <button
<div v-if="nodes && marks"> class="menubar__button"
:class="{ 'is-active': marks.bold.active() }"
@click="marks.bold.command"
>
<icon name="bold" />
</button>
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': marks.bold.active() }" :class="{ 'is-active': marks.italic.active() }"
@click="marks.bold.command" @click="marks.italic.command"
> >
<icon name="bold" /> <icon name="italic" />
</button> </button>
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': marks.italic.active() }" :class="{ 'is-active': marks.code.active() }"
@click="marks.italic.command" @click="marks.code.command"
> >
<icon name="italic" /> <icon name="code" />
</button> </button>
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': marks.code.active() }" :class="{ 'is-active': nodes.todo_list.active() }"
@click="marks.code.command" @click="nodes.todo_list.command"
> >
<icon name="code" /> <icon name="checklist" />
</button> </button>
<button </template>
class="menubar__button" </menu-bar>
:class="{ 'is-active': nodes.todo_list.active() }"
@click="nodes.todo_list.command"
>
<icon name="checklist" />
</button>
</div> <editor-content class="editor__content" :editor="editor" />
</div>
<div class="editor__content" slot="content" slot-scope="props">
<h2>
Todo List
</h2>
<p>
There is always something to do. Thankfully, there are checklists for that. Don't forget to call mom.
</p>
<ul data-type="todo_list">
<li data-type="todo_item" data-done="true">
Buy beer
</li>
<li data-type="todo_item" data-done="true">
Buy meat
</li>
<li data-type="todo_item" data-done="true">
Buy milk
</li>
<li data-type="todo_item" data-done="false">
Call mom
</li>
</ul>
</div>
</editor>
</div> </div>
</template> </template>
<script> <script>
import Icon from 'Components/Icon' import Icon from 'Components/Icon'
import { Editor } from 'tiptap' import { Editor, EditorContent, MenuBar } from 'tiptap'
import { import {
CodeBlockNode, CodeBlockNode,
HardBreakNode, HardBreakNode,
@@ -83,24 +58,51 @@ import {
export default { export default {
components: { components: {
Editor, EditorContent,
MenuBar,
Icon, Icon,
}, },
data() { data() {
return { return {
customProp: 2, editor: new Editor({
extensions: [ extensions: [
new CodeBlockNode(), new CodeBlockNode(),
new HardBreakNode(), new HardBreakNode(),
new HeadingNode({ maxLevel: 3 }), new HeadingNode({ maxLevel: 3 }),
new TodoItemNode(), new TodoItemNode(),
new TodoListNode(), new TodoListNode(),
new BoldMark(), new BoldMark(),
new CodeMark(), new CodeMark(),
new ItalicMark(), new ItalicMark(),
], ],
content: `
<h2>
Todo List
</h2>
<p>
There is always something to do. Thankfully, there are checklists for that. Don't forget to call mom.
</p>
<ul data-type="todo_list">
<li data-type="todo_item" data-done="true">
Buy beer
</li>
<li data-type="todo_item" data-done="true">
Buy meat
</li>
<li data-type="todo_item" data-done="true">
Buy milk
</li>
<li data-type="todo_item" data-done="false">
Call mom
</li>
</ul>
`,
}),
} }
}, },
beforeDestroy() {
this.editor.destroy()
},
} }
</script> </script>