tiptap/examples/Components/Routes/TodoList/index.vue

105 lines
2.1 KiB
Vue
Raw Normal View History

2018-08-22 22:20:56 +08:00
<template>
<div>
2018-08-28 15:31:08 +08:00
<editor :extensions="extensions" class="editor">
2018-08-22 22:20:56 +08:00
<div class="menubar" slot="menubar" slot-scope="{ nodes, marks }">
<div v-if="nodes && marks">
<button
2018-08-23 01:28:57 +08:00
class="menubar__button"
2018-08-25 05:02:32 +08:00
:class="{ 'is-active': marks.bold.active() }"
@click="marks.bold.command"
2018-08-23 01:28:57 +08:00
>
2018-08-25 05:02:32 +08:00
<icon name="bold" />
2018-08-22 22:24:28 +08:00
</button>
<button
2018-08-23 01:28:57 +08:00
class="menubar__button"
2018-08-25 05:02:32 +08:00
:class="{ 'is-active': marks.italic.active() }"
@click="marks.italic.command"
2018-08-23 01:28:57 +08:00
>
2018-08-25 05:02:32 +08:00
<icon name="italic" />
2018-08-22 22:24:28 +08:00
</button>
<button
2018-08-23 01:28:57 +08:00
class="menubar__button"
2018-08-25 05:02:32 +08:00
:class="{ 'is-active': marks.code.active() }"
@click="marks.code.command"
2018-08-23 01:28:57 +08:00
>
2018-08-25 05:02:32 +08:00
<icon name="code" />
2018-08-22 22:24:28 +08:00
</button>
<button
2018-08-23 01:28:57 +08:00
class="menubar__button"
:class="{ 'is-active': nodes.todo_list.active() }"
@click="nodes.todo_list.command"
>
2018-08-22 22:20:56 +08:00
<icon name="checklist" />
</button>
</div>
</div>
<div class="editor__content" slot="content" slot-scope="props">
2018-08-23 14:36:10 +08:00
<h2>
2018-08-23 01:28:57 +08:00
Todo List
2018-08-23 14:36:10 +08:00
</h2>
2018-08-25 05:02:32 +08:00
<p>
There is always something to do. Thankfully, there are checklists for that. Don't forget to call mom.
</p>
2018-08-23 01:28:57 +08:00
<ul data-type="todo_list">
2018-09-01 04:36:01 +08:00
<li data-type="todo_item" data-done="true">
2018-08-22 22:20:56 +08:00
Buy beer
</li>
2018-09-01 04:36:01 +08:00
<li data-type="todo_item" data-done="true">
2018-08-22 22:20:56 +08:00
Buy meat
</li>
2018-09-01 04:36:01 +08:00
<li data-type="todo_item" data-done="true">
2018-08-22 22:20:56 +08:00
Buy milk
</li>
<li data-type="todo_item" data-done="false">
Call mom
</li>
</ul>
2018-08-23 01:28:57 +08:00
</div>
2018-08-22 22:20:56 +08:00
</editor>
</div>
</template>
<script>
import Icon from 'Components/Icon'
import { Editor } from 'tiptap'
2018-08-24 04:08:19 +08:00
import {
2018-08-27 01:43:02 +08:00
CodeBlockNode,
HardBreakNode,
HeadingNode,
TodoItemNode,
TodoListNode,
BoldMark,
CodeMark,
ItalicMark,
2018-08-24 04:08:19 +08:00
} from 'tiptap-extensions'
2018-08-22 22:20:56 +08:00
export default {
2018-08-23 01:28:57 +08:00
components: {
Editor,
Icon,
},
2018-08-24 04:08:19 +08:00
data() {
return {
2018-09-01 02:42:13 +08:00
customProp: 2,
2018-08-24 04:08:19 +08:00
extensions: [
2018-08-27 01:43:02 +08:00
new CodeBlockNode(),
new HardBreakNode(),
new HeadingNode({ maxLevel: 3 }),
new TodoItemNode(),
new TodoListNode(),
new BoldMark(),
new CodeMark(),
new ItalicMark(),
2018-08-24 04:08:19 +08:00
],
}
},
2018-08-22 22:20:56 +08:00
}
</script>