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

add new command syntax to examples

Browse Source
This commit is contained in:
Philipp Kühn
2018-10-28 22:57:05 +01:00
parent 340b1b2266
commit e66218bd95
11 changed files with 74 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
examples/Components/Routes/HidingMenuBar/index.vue
View File

@@ -1,13 +1,13 @@
<template>
<div class="editor">
<menu-bar :editor="editor">
<template slot-scope="{ nodes, marks, focused }">
<template slot-scope="{ nodes, marks, commands, focused }">
<div class="menubar is-hidden" :class="{ 'is-focused': focused }">
<button
class="menubar__button"
:class="{ 'is-active': marks.bold.active() }"
@click="marks.bold.command"
@click="commands.bold"
>
<icon name="bold" />
</button>
@@ -15,7 +15,7 @@
<button
class="menubar__button"
:class="{ 'is-active': marks.italic.active() }"
@click="marks.italic.command"
@click="commands.italic"
>
<icon name="italic" />
</button>
@@ -23,7 +23,7 @@
<button
class="menubar__button"
:class="{ 'is-active': marks.strike.active() }"
@click="marks.strike.command"
@click="commands.strike"
>
<icon name="strike" />
</button>
@@ -31,23 +31,23 @@
<button
class="menubar__button"
:class="{ 'is-active': marks.underline.active() }"
@click="marks.underline.command"
@click="commands.underline"
>
<icon name="underline" />
</button>
<button
class="menubar__button"
@click="marks.code.command"
:class="{ 'is-active': marks.code.active() }
">
:class="{ 'is-active': marks.code.active() }"
@click="commands.code"
>
<icon name="code" />
</button>
<button
class="menubar__button"
:class="{ 'is-active': nodes.paragraph.active() }"
@click="nodes.paragraph.command"
@click="commands.paragraph"
>
<icon name="paragraph" />
</button>
@@ -55,7 +55,7 @@
<button
class="menubar__button"
:class="{ 'is-active': nodes.heading.active({ level: 1 }) }"
@click="nodes.heading.command({ level: 1 })"
@click="commands.heading({ level: 1 })"
>
H1
</button>
@@ -63,7 +63,7 @@
<button
class="menubar__button"
:class="{ 'is-active': nodes.heading.active({ level: 2 }) }"
@click="nodes.heading.command({ level: 2 })"
@click="commands.heading({ level: 2 })"
>
H2
</button>
@@ -71,7 +71,7 @@
<button
class="menubar__button"
:class="{ 'is-active': nodes.heading.active({ level: 3 }) }"
@click="nodes.heading.command({ level: 3 })"
@click="commands.heading({ level: 3 })"
>
H3
</button>
@@ -79,7 +79,7 @@
<button
class="menubar__button"
:class="{ 'is-active': nodes.bullet_list.active() }"
@click="nodes.bullet_list.command"
@click="commands.bullet_list"
>
<icon name="ul" />
</button>
@@ -87,7 +87,7 @@
<button
class="menubar__button"
:class="{ 'is-active': nodes.ordered_list.active() }"
@click="nodes.ordered_list.command"
@click="commands.ordered_list"
>
<icon name="ol" />
</button>
@@ -95,7 +95,7 @@
<button
class="menubar__button"
:class="{ 'is-active': nodes.blockquote.active() }"
@click="nodes.blockquote.command"
@click="commands.blockquote"
>
<icon name="quote" />
</button>
@@ -103,7 +103,7 @@
<button
class="menubar__button"
:class="{ 'is-active': nodes.code_block.active() }"
@click="nodes.code_block.command"
@click="commands.code_block"
>
<icon name="code" />
</button>