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

fix some examples

Browse Source
This commit is contained in:
Philipp Kühn
2018-10-29 23:31:13 +01:00
parent 253596fb35
commit 68793ea385
11 changed files with 51 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
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 class="menubar" :editor="editor">
<template slot-scope="{ nodes, marks, commands, isActive }"> <template slot-scope="{ commands, isActive }">
<button <button
class="menubar__button" class="menubar__button"

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

@@ -2,11 +2,11 @@
<div> <div>
<div class="editor"> <div class="editor">
<menu-bar class="menubar" :editor="editor"> <menu-bar class="menubar" :editor="editor">
<template slot-scope="{ nodes, marks, commands }"> <template slot-scope="{ commands, isActive }">
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': marks.bold.active() }" :class="{ 'is-active': isActive('bold') }"
@click="commands.bold" @click="commands.bold"
> >
<icon name="bold" /> <icon name="bold" />
@@ -14,7 +14,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': marks.italic.active() }" :class="{ 'is-active': isActive('italic') }"
@click="commands.italic" @click="commands.italic"
> >
<icon name="italic" /> <icon name="italic" />
@@ -22,7 +22,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': marks.code.active() }" :class="{ 'is-active': isActive('code') }"
@click="commands.code" @click="commands.code"
> >
<icon name="code" /> <icon name="code" />
@@ -30,7 +30,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.paragraph.active() }" :class="{ 'is-active': isActive('paragraph') }"
@click="commands.paragraph" @click="commands.paragraph"
> >
<icon name="paragraph" /> <icon name="paragraph" />
@@ -38,7 +38,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.heading.active({ level: 1 }) }" :class="{ 'is-active': isActive('heading', { level: 1 }) }"
@click="commands.heading({ level: 1 })" @click="commands.heading({ level: 1 })"
> >
H1 H1
@@ -46,7 +46,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.heading.active({ level: 2 }) }" :class="{ 'is-active': isActive('heading', { level: 2 }) }"
@click="commands.heading({ level: 2 })" @click="commands.heading({ level: 2 })"
> >
H2 H2
@@ -54,7 +54,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.heading.active({ level: 3 }) }" :class="{ 'is-active': isActive('heading', { level: 3 }) }"
@click="commands.heading({ level: 3 })" @click="commands.heading({ level: 3 })"
> >
H3 H3
@@ -62,7 +62,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.bullet_list.active() }" :class="{ 'is-active': isActive('bullet_list') }"
@click="commands.bullet_list" @click="commands.bullet_list"
> >
<icon name="ul" /> <icon name="ul" />
@@ -70,7 +70,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.ordered_list.active() }" :class="{ 'is-active': isActive('ordered_list') }"
@click="commands.ordered_list" @click="commands.ordered_list"
> >
<icon name="ol" /> <icon name="ol" />
@@ -78,7 +78,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.code_block.active() }" :class="{ 'is-active': isActive('code_block') }"
@click="commands.code_block" @click="commands.code_block"
> >
<icon name="code" /> <icon name="code" />

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

@@ -1,11 +1,11 @@
<template> <template>
<div class="editor"> <div class="editor">
<floating-menu class="editor__floating-menu" :editor="editor"> <floating-menu class="editor__floating-menu" :editor="editor">
<template slot-scope="{ nodes, marks, commands }"> <template slot-scope="{ commands, isActive }">
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.heading.active({ level: 1 }) }" :class="{ 'is-active': isActive('heading', { level: 1 }) }"
@click="commands.heading({ level: 1 })" @click="commands.heading({ level: 1 })"
> >
H1 H1
@@ -13,7 +13,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.heading.active({ level: 2 }) }" :class="{ 'is-active': isActive('heading', { level: 2 }) }"
@click="commands.heading({ level: 2 })" @click="commands.heading({ level: 2 })"
> >
H2 H2
@@ -21,7 +21,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.heading.active({ level: 3 }) }" :class="{ 'is-active': isActive('heading', { level: 3 }) }"
@click="commands.heading({ level: 3 })" @click="commands.heading({ level: 3 })"
> >
H3 H3
@@ -29,7 +29,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.bullet_list.active() }" :class="{ 'is-active': isActive('bullet_list') }"
@click="commands.bullet_list" @click="commands.bullet_list"
> >
<icon name="ul" /> <icon name="ul" />
@@ -37,7 +37,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.ordered_list.active() }" :class="{ 'is-active': isActive('ordered_list') }"
@click="commands.ordered_list" @click="commands.ordered_list"
> >
<icon name="ol" /> <icon name="ol" />
@@ -45,7 +45,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.blockquote.active() }" :class="{ 'is-active': isActive('blockquote') }"
@click="commands.blockquote" @click="commands.blockquote"
> >
<icon name="quote" /> <icon name="quote" />
@@ -53,7 +53,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.code_block.active() }" :class="{ 'is-active': isActive('code_block') }"
@click="commands.code_block" @click="commands.code_block"
> >
<icon name="code" /> <icon name="code" />

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

@@ -1,12 +1,12 @@
<template> <template>
<div class="editor"> <div class="editor">
<menu-bar :editor="editor"> <menu-bar :editor="editor">
<template slot-scope="{ nodes, marks, commands, focused }"> <template slot-scope="{ commands, isActive, focused }">
<div class="menubar is-hidden" :class="{ 'is-focused': focused }"> <div class="menubar is-hidden" :class="{ 'is-focused': focused }">
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': marks.bold.active() }" :class="{ 'is-active': isActive('bold') }"
@click="commands.bold" @click="commands.bold"
> >
<icon name="bold" /> <icon name="bold" />
@@ -14,7 +14,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': marks.italic.active() }" :class="{ 'is-active': isActive('italic') }"
@click="commands.italic" @click="commands.italic"
> >
<icon name="italic" /> <icon name="italic" />
@@ -22,7 +22,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': marks.strike.active() }" :class="{ 'is-active': isActive('strike') }"
@click="commands.strike" @click="commands.strike"
> >
<icon name="strike" /> <icon name="strike" />
@@ -30,7 +30,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': marks.underline.active() }" :class="{ 'is-active': isActive('underline') }"
@click="commands.underline" @click="commands.underline"
> >
<icon name="underline" /> <icon name="underline" />
@@ -38,7 +38,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': marks.code.active() }" :class="{ 'is-active': isActive('code') }"
@click="commands.code" @click="commands.code"
> >
<icon name="code" /> <icon name="code" />
@@ -46,7 +46,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.paragraph.active() }" :class="{ 'is-active': isActive('paragraph') }"
@click="commands.paragraph" @click="commands.paragraph"
> >
<icon name="paragraph" /> <icon name="paragraph" />
@@ -54,7 +54,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.heading.active({ level: 1 }) }" :class="{ 'is-active': isActive('heading', { level: 1 }) }"
@click="commands.heading({ level: 1 })" @click="commands.heading({ level: 1 })"
> >
H1 H1
@@ -62,7 +62,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.heading.active({ level: 2 }) }" :class="{ 'is-active': isActive('heading', { level: 2 }) }"
@click="commands.heading({ level: 2 })" @click="commands.heading({ level: 2 })"
> >
H2 H2
@@ -70,7 +70,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.heading.active({ level: 3 }) }" :class="{ 'is-active': isActive('heading', { level: 3 }) }"
@click="commands.heading({ level: 3 })" @click="commands.heading({ level: 3 })"
> >
H3 H3
@@ -78,7 +78,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.bullet_list.active() }" :class="{ 'is-active': isActive('bullet_list') }"
@click="commands.bullet_list" @click="commands.bullet_list"
> >
<icon name="ul" /> <icon name="ul" />
@@ -86,7 +86,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.ordered_list.active() }" :class="{ 'is-active': isActive('ordered_list') }"
@click="commands.ordered_list" @click="commands.ordered_list"
> >
<icon name="ol" /> <icon name="ol" />
@@ -94,7 +94,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.blockquote.active() }" :class="{ 'is-active': isActive('blockquote') }"
@click="commands.blockquote" @click="commands.blockquote"
> >
<icon name="quote" /> <icon name="quote" />
@@ -102,7 +102,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.code_block.active() }" :class="{ 'is-active': isActive('code_block') }"
@click="commands.code_block" @click="commands.code_block"
> >
<icon name="code" /> <icon name="code" />

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

@@ -1,11 +1,11 @@
<template> <template>
<div class="editor"> <div class="editor">
<menu-bubble class="menububble" :editor="editor"> <menu-bubble class="menububble" :editor="editor">
<template slot-scope="{ nodes, marks, commands }"> <template slot-scope="{ commands, isActive }">
<button <button
class="menububble__button" class="menububble__button"
:class="{ 'is-active': marks.bold.active() }" :class="{ 'is-active': isActive('bold') }"
@click="commands.bold" @click="commands.bold"
> >
<icon name="bold" /> <icon name="bold" />
@@ -13,7 +13,7 @@
<button <button
class="menububble__button" class="menububble__button"
:class="{ 'is-active': marks.italic.active() }" :class="{ 'is-active': isActive('italic') }"
@click="commands.italic" @click="commands.italic"
> >
<icon name="italic" /> <icon name="italic" />
@@ -21,7 +21,7 @@
<button <button
class="menububble__button" class="menububble__button"
:class="{ 'is-active': marks.code.active() }" :class="{ 'is-active': isActive('code') }"
@click="commands.code" @click="commands.code"
> >
<icon name="code" /> <icon name="code" />

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

@@ -1,11 +1,11 @@
<template> <template>
<div class="editor"> <div class="editor">
<menu-bar class="menubar" :editor="editor"> <menu-bar class="menubar" :editor="editor">
<template slot-scope="{ nodes, marks, commands }"> <template slot-scope="{ commands, isActive }">
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.paragraph.active({ textAlign: 'left' }) }" :class="{ 'is-active': isActive('paragraph', { textAlign: 'left' }) }"
@click="commands.paragraph({ textAlign: 'left' })" @click="commands.paragraph({ textAlign: 'left' })"
> >
<icon name="align-left" /> <icon name="align-left" />
@@ -13,7 +13,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.paragraph.active({ textAlign: 'center' }) }" :class="{ 'is-active': isActive('paragraph', { textAlign: 'center' }) }"
@click="commands.paragraph({ textAlign: 'center' })" @click="commands.paragraph({ textAlign: 'center' })"
> >
<icon name="align-center" /> <icon name="align-center" />
@@ -21,7 +21,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.paragraph.active({ textAlign: 'right' }) }" :class="{ 'is-active': isActive('paragraph', { textAlign: 'right' }) }"
@click="commands.paragraph({ textAlign: 'right' })" @click="commands.paragraph({ textAlign: 'right' })"
> >
<icon name="align-right" /> <icon name="align-right" />

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

@@ -1,11 +1,11 @@
<template> <template>
<div class="editor"> <div class="editor">
<menu-bar class="menubar" :editor="editor"> <menu-bar class="menubar" :editor="editor">
<template slot-scope="{ nodes, marks, commands }"> <template slot-scope="{ commands, isActive }">
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': marks.bold.active() }" :class="{ 'is-active': isActive('bold') }"
@click="commands.bold" @click="commands.bold"
> >
<icon name="bold" /> <icon name="bold" />
@@ -13,7 +13,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': marks.italic.active() }" :class="{ 'is-active': isActive('italic') }"
@click="commands.italic" @click="commands.italic"
> >
<icon name="italic" /> <icon name="italic" />
@@ -21,7 +21,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': marks.code.active() }" :class="{ 'is-active': isActive('code') }"
@click="commands.code" @click="commands.code"
> >
<icon name="code" /> <icon name="code" />
@@ -29,7 +29,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.todo_list.active() }" :class="{ 'is-active': isActive('todo_list') }"
@click="commands.todo_list" @click="commands.todo_list"
> >
<icon name="checklist" /> <icon name="checklist" />

2
packages/tiptap/src/Components/EditorContent.js
View File

@@ -13,7 +13,7 @@ export default {
this.$nextTick(() => this.$el.append(element.firstChild)) this.$nextTick(() => this.$el.append(element.firstChild))
} }
}, },
} },
}, },
render(createElement) { render(createElement) {
return createElement('div') return createElement('div')

3
packages/tiptap/src/Components/FloatingMenu.js
View File

@@ -22,11 +22,10 @@ export default {
render(createElement) { render(createElement) {
if (this.editor) { if (this.editor) {
return createElement('div', this.$scopedSlots.default({ return createElement('div', this.$scopedSlots.default({
nodes: this.editor.menuActions.nodes,
marks: this.editor.menuActions.marks,
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),
})) }))
} }
}, },

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

@@ -8,8 +8,6 @@ export default {
render(createElement) { render(createElement) {
if (this.editor) { if (this.editor) {
return createElement('div', this.$scopedSlots.default({ return createElement('div', this.$scopedSlots.default({
nodes: this.editor.menuActions.nodes,
marks: this.editor.menuActions.marks,
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,

3
packages/tiptap/src/Components/MenuBubble.js
View File

@@ -22,11 +22,10 @@ export default {
render(createElement) { render(createElement) {
if (this.editor) { if (this.editor) {
return createElement('div', this.$scopedSlots.default({ return createElement('div', this.$scopedSlots.default({
nodes: this.editor.menuActions.nodes,
marks: this.editor.menuActions.marks,
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),
})) }))
} }
}, },