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

add renderless MenuBar

Browse Source
This commit is contained in:
Philipp Kühn
2018-11-04 22:43:26 +01:00
parent d4f6708daa
commit 32c62b85ca
7 changed files with 115 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,7 @@
<template> <template>
<div class="editor"> <div class="editor">
<menu-bar class="menubar" :editor="editor"> <menu-bar :editor="editor">
<template slot-scope="{ commands, isActive }"> <div class="menubar" slot-scope="{ commands, isActive }">
<button <button
class="menubar__button" class="menubar__button"
@@ -121,7 +121,7 @@
<icon name="redo" /> <icon name="redo" />
</button> </button>
</template> </div>
</menu-bar> </menu-bar>
<editor-content class="editor__content" :editor="editor" /> <editor-content class="editor__content" :editor="editor" />

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

@@ -1,8 +1,8 @@
<template> <template>
<div> <div>
<div class="editor"> <div class="editor">
<menu-bar class="menubar" :editor="editor"> <menu-bar :editor="editor">
<template slot-scope="{ commands, isActive }"> <div class="menubar" slot-scope="{ commands, isActive }">
<button <button
class="menubar__button" class="menubar__button"
@@ -84,7 +84,7 @@
<icon name="code" /> <icon name="code" />
</button> </button>
</template> </div>
</menu-bar> </menu-bar>
<editor-content class="editor__content" :editor="editor" /> <editor-content class="editor__content" :editor="editor" />

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

@@ -1,115 +1,117 @@
<template> <template>
<div class="editor"> <div class="editor">
<menu-bar :editor="editor"> <menu-bar :editor="editor">
<template slot-scope="{ commands, isActive, focused }"> <div
<div class="menubar is-hidden" :class="{ 'is-focused': focused }"> class="menubar is-hidden"
:class="{ 'is-focused': focused }"
slot-scope="{ commands, isActive, focused }"
>
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': isActive('bold') }" :class="{ 'is-active': isActive('bold') }"
@click="commands.bold" @click="commands.bold"
> >
<icon name="bold" /> <icon name="bold" />
</button> </button>
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': isActive('italic') }" :class="{ 'is-active': isActive('italic') }"
@click="commands.italic" @click="commands.italic"
> >
<icon name="italic" /> <icon name="italic" />
</button> </button>
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': isActive('strike') }" :class="{ 'is-active': isActive('strike') }"
@click="commands.strike" @click="commands.strike"
> >
<icon name="strike" /> <icon name="strike" />
</button> </button>
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': isActive('underline') }" :class="{ 'is-active': isActive('underline') }"
@click="commands.underline" @click="commands.underline"
> >
<icon name="underline" /> <icon name="underline" />
</button> </button>
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': isActive('code') }" :class="{ 'is-active': isActive('code') }"
@click="commands.code" @click="commands.code"
> >
<icon name="code" /> <icon name="code" />
</button> </button>
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': isActive('paragraph') }" :class="{ 'is-active': isActive('paragraph') }"
@click="commands.paragraph" @click="commands.paragraph"
> >
<icon name="paragraph" /> <icon name="paragraph" />
</button> </button>
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': isActive('heading', { level: 1 }) }" :class="{ 'is-active': isActive('heading', { level: 1 }) }"
@click="commands.heading({ level: 1 })" @click="commands.heading({ level: 1 })"
> >
H1 H1
</button> </button>
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': isActive('heading', { level: 2 }) }" :class="{ 'is-active': isActive('heading', { level: 2 }) }"
@click="commands.heading({ level: 2 })" @click="commands.heading({ level: 2 })"
> >
H2 H2
</button> </button>
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': isActive('heading', { level: 3 }) }" :class="{ 'is-active': isActive('heading', { level: 3 }) }"
@click="commands.heading({ level: 3 })" @click="commands.heading({ level: 3 })"
> >
H3 H3
</button> </button>
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': isActive('bullet_list') }" :class="{ 'is-active': isActive('bullet_list') }"
@click="commands.bullet_list" @click="commands.bullet_list"
> >
<icon name="ul" /> <icon name="ul" />
</button> </button>
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': isActive('ordered_list') }" :class="{ 'is-active': isActive('ordered_list') }"
@click="commands.ordered_list" @click="commands.ordered_list"
> >
<icon name="ol" /> <icon name="ol" />
</button> </button>
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': isActive('blockquote') }" :class="{ 'is-active': isActive('blockquote') }"
@click="commands.blockquote" @click="commands.blockquote"
> >
<icon name="quote" /> <icon name="quote" />
</button> </button>
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': isActive('code_block') }" :class="{ 'is-active': isActive('code_block') }"
@click="commands.code_block" @click="commands.code_block"
> >
<icon name="code" /> <icon name="code" />
</button> </button>
</div> </div>
</template>
</menu-bar> </menu-bar>
<editor-content class="editor__content" :editor="editor" /> <editor-content class="editor__content" :editor="editor" />

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

@@ -1,14 +1,14 @@
<template> <template>
<div class="editor"> <div class="editor">
<menu-bar class="menubar" :editor="editor"> <menu-bar :editor="editor">
<template slot-scope="{ commands }"> <div class="menubar" slot-scope="{ commands }">
<button <button
class="menubar__button" class="menubar__button"
@click="showImagePrompt(commands.image)" @click="showImagePrompt(commands.image)"
> >
<icon name="image" /> <icon name="image" />
</button> </button>
</template> </div>
</menu-bar> </menu-bar>
<editor-content class="editor__content" :editor="editor" /> <editor-content class="editor__content" :editor="editor" />

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

@@ -1,7 +1,7 @@
<template> <template>
<div class="editor"> <div class="editor">
<menu-bar class="menubar" :editor="editor"> <menu-bar :editor="editor">
<template slot-scope="{ commands, isActive }"> <div class="menubar" slot-scope="{ commands, isActive }">
<button <button
class="menubar__button" class="menubar__button"
@@ -27,7 +27,7 @@
<icon name="align-right" /> <icon name="align-right" />
</button> </button>
</template> </div>
</menu-bar> </menu-bar>
<editor-content class="editor__content" :editor="editor" /> <editor-content class="editor__content" :editor="editor" />

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

@@ -1,7 +1,7 @@
<template> <template>
<div class="editor"> <div class="editor">
<menu-bar class="menubar" :editor="editor"> <menu-bar :editor="editor">
<template slot-scope="{ commands, isActive }"> <div class="menubar" slot-scope="{ commands, isActive }">
<button <button
class="menubar__button" class="menubar__button"
@@ -35,7 +35,7 @@
<icon name="checklist" /> <icon name="checklist" />
</button> </button>
</template> </div>
</menu-bar> </menu-bar>
<editor-content class="editor__content" :editor="editor" /> <editor-content class="editor__content" :editor="editor" />

6
packages/tiptap/src/Components/MenuBar.js
View File

@@ -5,17 +5,17 @@ export default {
type: Object, type: Object,
}, },
}, },
render(createElement) { render() {
if (!this.editor) { if (!this.editor) {
return null return null
} }
return createElement('div', this.$scopedSlots.default({ return this.$scopedSlots.default({
focused: this.editor.view.focused, focused: this.editor.view.focused,
focus: this.editor.focus, focus: this.editor.focus,
commands: this.editor.commands, commands: this.editor.commands,
isActive: this.editor.isActive.bind(this.editor), isActive: this.editor.isActive.bind(this.editor),
markAttrs: this.editor.markAttrs.bind(this.editor), markAttrs: this.editor.markAttrs.bind(this.editor),
})) })
}, },
} }