ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix menububble example

Browse Source
This commit is contained in:
Philipp Kühn
2018-10-22 17:40:55 +02:00
parent 9ec3d82d12
commit 3718591d33
4 changed files with 95 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
examples/Components/Routes/MenuBubble/index.vue
View File

@@ -1,53 +1,42 @@
<template>
<div>
<editor class="editor" :extensions="extensions">
<div class="editor">
<menu-bubble class="menubar" :editor="editor">
<template slot-scope="{ nodes, marks }">
<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.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.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>
<button
class="menububble__button"
:class="{ 'is-active': marks.code.active() }"
@click="marks.code.command"
>
<icon name="code" />
</button>
</template>
</menu-bubble>
</template>
</div>
<div class="editor__content" slot="content" slot-scope="props">
<h2>
Menu Bubble
</h2>
<p>
Hey, try to select some text here. There will popup a menu for selecting some inline styles. <em>Remember:</em> you have full control about content and styling of this menu.
</p>
</div>
</editor>
<editor-content class="editor__content" :editor="editor" />
</div>
</template>
<script>
import Icon from 'Components/Icon'
import { Editor } from 'tiptap'
import { Editor, EditorContent, MenuBubble } from 'tiptap'
import {
BlockquoteNode,
BulletListNode,
@@ -62,32 +51,48 @@ import {
CodeMark,
ItalicMark,
LinkMark,
StrikeMark,
UnderlineMark,
HistoryExtension,
} from 'tiptap-extensions'
export default {
components: {
Editor,
EditorContent,
MenuBubble,
Icon,
},
data() {
return {
extensions: [
new BlockquoteNode(),
new BulletListNode(),
new CodeBlockNode(),
new HardBreakNode(),
new HeadingNode({ maxLevel: 3 }),
new ListItemNode(),
new OrderedListNode(),
new TodoItemNode(),
new TodoListNode(),
new BoldMark(),
new CodeMark(),
new ItalicMark(),
new LinkMark(),
new HistoryExtension(),
],
editor: new Editor({
editable: true,
extensions: [
new BlockquoteNode(),
new BulletListNode(),
new CodeBlockNode(),
new HardBreakNode(),
new HeadingNode({ maxLevel: 3 }),
new ListItemNode(),
new OrderedListNode(),
new TodoItemNode(),
new TodoListNode(),
new BoldMark(),
new CodeMark(),
new ItalicMark(),
new LinkMark(),
new StrikeMark(),
new UnderlineMark(),
new HistoryExtension(),
],
content: `
<h2>
Menu Bubble
</h2>
<p>
Hey, try to select some text here. There will popup a menu for selecting some inline styles. <em>Remember:</em> you have full control about content and styling of this menu.
</p>
`,
}),
}
},
}