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

refactoring

Browse Source
This commit is contained in:
Philipp Kühn
2018-08-22 15:58:32 +02:00
parent a0d9d6dc51
commit 88e56c7b27
3 changed files with 91 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
examples/Components/Routes/Links/index.vue
View File

@@ -12,7 +12,11 @@
</form>
<template v-else>
<button class="menububble__button" @click="showLinkMenu(marks.link)" :class="{ 'is-active': marks.link.active() }">
<button
class="menububble__button"
@click="showLinkMenu(marks.link)"
:class="{ 'is-active': marks.link.active() }"
>
<span>Add Link</span>
<icon name="link" />
</button>

74
examples/Components/Routes/MenuBar/index.vue
View File

@@ -1,40 +1,93 @@
<template>
<div>
<editor :editable="true" class="editor" @update="onUpdate">
<div class="menubar" :class="{ 'is-focused': focused }" slot="menubar" slot-scope="{ nodes, marks, focused }">
<div v-if="nodes && marks">
<button class="menubar__button" @click="marks.bold.command" :class="{ 'is-active': marks.bold.active() }">
<button
class="menubar__button"
:class="{ 'is-active': marks.bold.active() }"
@click="marks.bold.command"
>
<icon name="bold" />
</button>
<button class="menubar__button" @click="marks.italic.command" :class="{ 'is-active': marks.italic.active() }">
<button
class="menubar__button"
:class="{ 'is-active': marks.italic.active() }"
@click="marks.italic.command"
>
<icon name="italic" />
</button>
<button class="menubar__button" @click="marks.code.command" :class="{ 'is-active': marks.code.active() }">
<button
class="menubar__button"
@click="marks.code.command"
:class="{ 'is-active': marks.code.active() }
">
<icon name="code" />
</button>
<button class="menubar__button" @click="nodes.paragraph.command" :class="{ 'is-active': nodes.paragraph.active() }">
<button
class="menubar__button"
:class="{ 'is-active': nodes.paragraph.active() }"
@click="nodes.paragraph.command"
>
<icon name="paragraph" />
</button>
<button class="menubar__button" @click="nodes.heading.command({ level: 1 })" :class="{ 'is-active': nodes.heading.active({ level: 1 }) }">
<button
class="menubar__button"
:class="{ 'is-active': nodes.heading.active({ level: 1 }) }"
@click="nodes.heading.command({ level: 1 })"
>
H1
</button>
<button class="menubar__button" @click="nodes.heading.command({ level: 2 })" :class="{ 'is-active': nodes.heading.active({ level: 2 }) }">
<button
class="menubar__button"
:class="{ 'is-active': nodes.heading.active({ level: 2 }) }"
@click="nodes.heading.command({ level: 2 })"
>
H2
</button>
<button class="menubar__button" @click="nodes.heading.command({ level: 3 })" :class="{ 'is-active': nodes.heading.active({ level: 3 }) }">
<button
class="menubar__button"
:class="{ 'is-active': nodes.heading.active({ level: 3 }) }"
@click="nodes.heading.command({ level: 3 })"
>
H3
</button>
<button class="menubar__button" @click="nodes.bullet_list.command" :class="{ 'is-active': nodes.bullet_list.active() }">
<button
class="menubar__button"
:class="{ 'is-active': nodes.bullet_list.active() }"
@click="nodes.bullet_list.command"
>
<icon name="ul" />
</button>
<button class="menubar__button" @click="nodes.ordered_list.command" :class="{ 'is-active': nodes.ordered_list.active() }">
<button
class="menubar__button"
:class="{ 'is-active': nodes.ordered_list.active() }"
@click="nodes.ordered_list.command"
>
<icon name="ol" />
</button>
<button class="menubar__button" @click="nodes.code_block.command" :class="{ 'is-active': nodes.code_block.active() }">
<button
class="menubar__button"
:class="{ 'is-active': nodes.code_block.active() }"
@click="nodes.code_block.command"
>
<icon name="code" />
</button>
</div>
</div>
<div class="editor__content" slot="content" slot-scope="props">
<h1>
A renderless rich-text editor for Vue.js
@@ -55,6 +108,7 @@
It's amazing 👏
</p>
</div>
</editor>
</div>
</template>

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

@@ -1,19 +1,37 @@
<template>
<div>
<editor class="editor" @update="onUpdate">
<div class="menububble" slot="menububble" slot-scope="{ marks, focus }">
<template v-if="marks">
<button class="menububble__button" @click="marks.bold.command" :class="{ 'is-active': marks.bold.active() }">
<button
class="menububble__button"
:class="{ 'is-active': marks.bold.active() }"
@click="marks.bold.command"
>
<icon name="bold" />
</button>
<button class="menububble__button" @click="marks.italic.command" :class="{ 'is-active': marks.italic.active() }">
<button
class="menububble__button"
:class="{ 'is-active': marks.italic.active() }"
@click="marks.italic.command"
>
<icon name="italic" />
</button>
<button class="menububble__button" @click="marks.code.command" :class="{ 'is-active': marks.code.active() }">
<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">
<h1>
Bubble Navigation
@@ -22,6 +40,7 @@
Hey, try to select some text.
</p>
</div>
</editor>
</div>
</template>