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

154 lines
2.8 KiB
Vue
Raw Normal View History

2018-10-14 05:41:54 +08:00
<template>
2018-10-24 05:44:48 +08:00
<div class="editor">
2018-11-05 02:46:09 +08:00
<floating-menu :editor="editor">
<div
slot-scope="{ commands, isActive, menu }"
class="editor__floating-menu"
:class="{ 'is-active': menu.isActive }"
:style="`top: ${menu.top}px`"
>
2018-10-24 05:44:48 +08:00
<button
class="menubar__button"
2018-10-30 06:31:13 +08:00
:class="{ 'is-active': isActive('heading', { level: 1 }) }"
2018-10-29 05:57:05 +08:00
@click="commands.heading({ level: 1 })"
2018-10-24 05:44:48 +08:00
>
H1
</button>
<button
class="menubar__button"
2018-10-30 06:31:13 +08:00
:class="{ 'is-active': isActive('heading', { level: 2 }) }"
2018-10-29 05:57:05 +08:00
@click="commands.heading({ level: 2 })"
2018-10-24 05:44:48 +08:00
>
H2
</button>
<button
class="menubar__button"
2018-10-30 06:31:13 +08:00
:class="{ 'is-active': isActive('heading', { level: 3 }) }"
2018-10-29 05:57:05 +08:00
@click="commands.heading({ level: 3 })"
2018-10-24 05:44:48 +08:00
>
H3
</button>
<button
class="menubar__button"
2018-10-30 06:31:13 +08:00
:class="{ 'is-active': isActive('bullet_list') }"
2018-10-29 05:57:05 +08:00
@click="commands.bullet_list"
2018-10-24 05:44:48 +08:00
>
<icon name="ul" />
</button>
<button
class="menubar__button"
2018-10-30 06:31:13 +08:00
:class="{ 'is-active': isActive('ordered_list') }"
2018-10-29 05:57:05 +08:00
@click="commands.ordered_list"
2018-10-24 05:44:48 +08:00
>
<icon name="ol" />
</button>
<button
class="menubar__button"
2018-10-30 06:31:13 +08:00
:class="{ 'is-active': isActive('blockquote') }"
2018-10-29 05:57:05 +08:00
@click="commands.blockquote"
2018-10-24 05:44:48 +08:00
>
<icon name="quote" />
</button>
<button
class="menubar__button"
2018-10-30 06:31:13 +08:00
:class="{ 'is-active': isActive('code_block') }"
2018-10-29 05:57:05 +08:00
@click="commands.code_block"
2018-10-24 05:44:48 +08:00
>
<icon name="code" />
</button>
2018-11-05 02:46:09 +08:00
</div>
2018-10-24 05:44:48 +08:00
</floating-menu>
<editor-content class="editor__content" :editor="editor" />
2018-10-14 05:41:54 +08:00
</div>
</template>
<script>
import Icon from 'Components/Icon'
2018-10-24 05:44:48 +08:00
import { Editor, EditorContent, FloatingMenu } from 'tiptap'
2018-10-14 05:41:54 +08:00
import {
2018-10-24 13:46:47 +08:00
Blockquote,
BulletList,
CodeBlock,
HardBreak,
Heading,
ListItem,
OrderedList,
TodoItem,
TodoList,
Bold,
Code,
Italic,
Link,
History,
2018-10-14 05:41:54 +08:00
} from 'tiptap-extensions'
export default {
components: {
2018-10-24 05:44:48 +08:00
EditorContent,
FloatingMenu,
2018-10-14 05:41:54 +08:00
Icon,
},
data() {
return {
2018-10-24 05:44:48 +08:00
editor: new Editor({
extensions: [
2018-10-24 13:46:47 +08:00
new Blockquote(),
new BulletList(),
new CodeBlock(),
new HardBreak(),
new Heading({ levels: [1, 2, 3] }),
2018-10-24 13:46:47 +08:00
new ListItem(),
new OrderedList(),
new TodoItem(),
new TodoList(),
new Bold(),
new Code(),
new Italic(),
new Link(),
new History(),
2018-10-24 05:44:48 +08:00
],
content: `
<h2>
Floating Menu
</h2>
<p>
This is an example of a medium-like editor. Enter a new line and some buttons will appear.
</p>
`,
}),
2018-10-14 05:41:54 +08:00
}
},
}
</script>
<style lang="scss">
@import "~variables";
.editor {
position: relative;
&__floating-menu {
position: absolute;
margin-top: -0.25rem;
2018-10-14 14:57:31 +08:00
visibility: hidden;
opacity: 0;
2018-10-14 14:56:26 +08:00
transition: opacity 0.2s, visibility 0.2s;
2018-11-05 02:46:09 +08:00
&.is-active {
opacity: 1;
visibility: visible;
}
2018-10-14 05:41:54 +08:00
}
}
</style>