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

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

@@ -1,75 +1,50 @@
<template>
<div>
<editor :extensions="extensions" class="editor">
<div class="editor">
<menu-bar class="menubar" :editor="editor">
<template slot-scope="{ nodes, marks }">
<div class="menubar" slot="menubar" slot-scope="{ nodes, marks }">
<div v-if="nodes && marks">
<button
class="menubar__button"
:class="{ 'is-active': marks.bold.active() }"
@click="marks.bold.command"
>
<icon name="bold" />
</button>
<button
class="menubar__button"
:class="{ 'is-active': marks.bold.active() }"
@click="marks.bold.command"
>
<icon name="bold" />
</button>
<button
class="menubar__button"
:class="{ 'is-active': marks.italic.active() }"
@click="marks.italic.command"
>
<icon name="italic" />
</button>
<button
class="menubar__button"
:class="{ 'is-active': marks.italic.active() }"
@click="marks.italic.command"
>
<icon name="italic" />
</button>
<button
class="menubar__button"
:class="{ 'is-active': marks.code.active() }"
@click="marks.code.command"
>
<icon name="code" />
</button>
<button
class="menubar__button"
:class="{ 'is-active': marks.code.active() }"
@click="marks.code.command"
>
<icon name="code" />
</button>
<button
class="menubar__button"
:class="{ 'is-active': nodes.todo_list.active() }"
@click="nodes.todo_list.command"
>
<icon name="checklist" />
</button>
<button
class="menubar__button"
:class="{ 'is-active': nodes.todo_list.active() }"
@click="nodes.todo_list.command"
>
<icon name="checklist" />
</button>
</template>
</menu-bar>
</div>
</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>
<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 {
CodeBlockNode,
HardBreakNode,
@@ -83,24 +58,51 @@ import {
export default {
components: {
Editor,
EditorContent,
MenuBar,
Icon,
},
data() {
return {
customProp: 2,
extensions: [
new CodeBlockNode(),
new HardBreakNode(),
new HeadingNode({ maxLevel: 3 }),
new TodoItemNode(),
new TodoListNode(),
new BoldMark(),
new CodeMark(),
new ItalicMark(),
],
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>
<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>