tiptap/examples/Components/Routes/MenuBubble/index.vue
2018-08-24 08:41:17 +02:00

97 lines
1.6 KiB
Vue

<template>
<div>
<editor class="editor" :extensions="extensions" @update="onUpdate">
<div class="menububble" slot="menububble" slot-scope="{ marks, focus }">
<template v-if="marks">
<button
class="menububble__button"
:class="{ 'is-active': marks.bold.active() }"
@click="marks.bold.command"
>
<icon name="bold" />
</button>
<button
class="menububble__button"
:class="{ 'is-active': marks.italic.active() }"
@click="marks.italic.command"
>
<icon name="italic" />
</button>
<button
class="menububble__button"
:class="{ 'is-active': marks.code.active() }"
@click="marks.code.command"
>
<icon name="code" />
</button>
</template>
</div>
<div class="editor__content" slot="content" slot-scope="props">
<h2>
Menu Bubble
</h2>
<p>
Hey, try to select some text.
</p>
</div>
</editor>
</div>
</template>
<script>
import Icon from 'Components/Icon'
import { Editor } from 'tiptap'
import {
Blockquote,
BulletList,
CodeBlock,
HardBreak,
Heading,
ListItem,
OrderedList,
TodoItem,
TodoList,
Bold,
Code,
Italic,
Link,
} from 'tiptap-extensions'
export default {
components: {
Editor,
Icon,
},
data() {
return {
extensions: [
new Blockquote(),
new BulletList(),
new CodeBlock(),
new HardBreak(),
new Heading({ maxLevel: 3 }),
new ListItem(),
new OrderedList(),
new TodoItem(),
new TodoList(),
new Bold(),
new Code(),
new Italic(),
new Link(),
],
}
},
methods: {
onUpdate(state) {
// console.log(state.doc.toJSON())
},
},
}
</script>