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

almost fix floating menu example

Browse Source
This commit is contained in:
Philipp Kühn
2018-10-23 23:44:48 +02:00
parent 804b44b146
commit 303e2f6d9c
5 changed files with 191 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
examples/Components/Routes/FloatingMenu/index.vue
View File

@@ -1,85 +1,74 @@
<template>
<div>
<editor class="editor" :extensions="extensions">
<div class="editor">
<floating-menu class="editor__floating-menu" :editor="editor">
<template slot-scope="{ nodes, marks }">
<div class="editor__floating-menu" slot="floatingMenu" slot-scope="{ nodes }">
<template v-if="nodes">
<button
class="menubar__button"
:class="{ 'is-active': nodes.heading.active({ level: 1 }) }"
@click="nodes.heading.command({ level: 1 })"
>
H1
</button>
<button
class="menubar__button"
:class="{ 'is-active': nodes.heading.active({ level: 1 }) }"
@click="nodes.heading.command({ level: 1 })"
>
H1
</button>
<button
class="menubar__button"
:class="{ 'is-active': nodes.heading.active({ level: 2 }) }"
@click="nodes.heading.command({ level: 2 })"
>
H2
</button>
<button
class="menubar__button"
:class="{ 'is-active': nodes.heading.active({ level: 2 }) }"
@click="nodes.heading.command({ level: 2 })"
>
H2
</button>
<button
class="menubar__button"
:class="{ 'is-active': nodes.heading.active({ level: 3 }) }"
@click="nodes.heading.command({ level: 3 })"
>
H3
</button>
<button
class="menubar__button"
:class="{ 'is-active': nodes.heading.active({ level: 3 }) }"
@click="nodes.heading.command({ level: 3 })"
>
H3
</button>
<button
class="menubar__button"
:class="{ 'is-active': nodes.bullet_list.active() }"
@click="nodes.bullet_list.command"
>
<icon name="ul" />
</button>
<button
class="menubar__button"
:class="{ 'is-active': nodes.bullet_list.active() }"
@click="nodes.bullet_list.command"
>
<icon name="ul" />
</button>
<button
class="menubar__button"
:class="{ 'is-active': nodes.ordered_list.active() }"
@click="nodes.ordered_list.command"
>
<icon name="ol" />
</button>
<button
class="menubar__button"
:class="{ 'is-active': nodes.ordered_list.active() }"
@click="nodes.ordered_list.command"
>
<icon name="ol" />
</button>
<button
class="menubar__button"
:class="{ 'is-active': nodes.blockquote.active() }"
@click="nodes.blockquote.command"
>
<icon name="quote" />
</button>
<button
class="menubar__button"
:class="{ 'is-active': nodes.blockquote.active() }"
@click="nodes.blockquote.command"
>
<icon name="quote" />
</button>
<button
class="menubar__button"
:class="{ 'is-active': nodes.code_block.active() }"
@click="nodes.code_block.command"
>
<icon name="code" />
</button>
<button
class="menubar__button"
:class="{ 'is-active': nodes.code_block.active() }"
@click="nodes.code_block.command"
>
<icon name="code" />
</button>
</template>
</floating-menu>
</template>
</div>
<div class="editor__content" slot="content" slot-scope="props">
<h2>
Floating Menu
</h2>
<p>
This is an example of a medium-like editor. Enter a new line and some buttons will appear.
</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, FloatingMenu } from 'tiptap'
import {
BlockquoteNode,
BulletListNode,
@@ -99,27 +88,38 @@ import {
export default {
components: {
Editor,
EditorContent,
FloatingMenu,
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({
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(),
],
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>
`,
}),
}
},
}