fix link example

This commit is contained in:
Philipp Kühn
2018-10-29 23:58:07 +01:00
parent 68793ea385
commit e608808c27
5 changed files with 23 additions and 9 deletions

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 }"> <template slot-scope="{ commands, isActive, markAttrs }">
<form class="menububble__form" v-if="linkMenuIsActive" @submit.prevent="setLinkUrl(linkUrl, marks.link)"> <form class="menububble__form" v-if="linkMenuIsActive" @submit.prevent="setLinkUrl(commands.link, linkUrl)">
<input class="menububble__input" type="text" v-model="linkUrl" placeholder="https://" ref="linkInput" @keydown.esc="hideLinkMenu"/> <input class="menububble__input" type="text" v-model="linkUrl" placeholder="https://" ref="linkInput" @keydown.esc="hideLinkMenu"/>
<button class="menububble__button" @click="setLinkUrl(null, marks.link)" type="button"> <button class="menububble__button" @click="setLinkUrl(commands.link, null)" type="button">
<icon name="remove" /> <icon name="remove" />
</button> </button>
</form> </form>
@@ -13,8 +13,8 @@
<template v-else> <template v-else>
<button <button
class="menububble__button" class="menububble__button"
@click="showLinkMenu(marks.link)" @click="showLinkMenu(markAttrs('link'))"
:class="{ 'is-active': marks.link.active() }" :class="{ 'is-active': isActive('link') }"
> >
<span>Add Link</span> <span>Add Link</span>
<icon name="link" /> <icon name="link" />
@@ -87,8 +87,8 @@ export default {
} }
}, },
methods: { methods: {
showLinkMenu(type) { showLinkMenu(attrs) {
this.linkUrl = type.attrs.href this.linkUrl = attrs.href
this.linkMenuIsActive = true this.linkMenuIsActive = true
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.linkInput.focus() this.$refs.linkInput.focus()
@@ -98,8 +98,8 @@ export default {
this.linkUrl = null this.linkUrl = null
this.linkMenuIsActive = false this.linkMenuIsActive = false
}, },
setLinkUrl(url, type, focus) { setLinkUrl(command, url) {
type.command({ href: url }) command({ href: url })
this.hideLinkMenu() this.hideLinkMenu()
this.editor.focus() this.editor.focus()
}, },

View File

@@ -26,6 +26,7 @@ export default {
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),
})) }))
} }
}, },

View File

@@ -12,6 +12,7 @@ export default {
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),
})) }))
} }
}, },

View File

@@ -26,6 +26,7 @@ export default {
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),
})) }))
} }
}, },

View File

@@ -239,6 +239,13 @@ export default class Editor {
[name]: (attrs = {}) => markIsActive(this.state, mark, attrs), [name]: (attrs = {}) => markIsActive(this.state, mark, attrs),
}), {}) }), {})
this.activeMarkAttrs = Object
.entries(this.schema.marks)
.reduce((marks, [name, mark]) => ({
...marks,
[name]: getMarkAttrs(this.state, mark),
}), {})
this.activeNodes = Object this.activeNodes = Object
.entries(this.schema.nodes) .entries(this.schema.nodes)
.reduce((nodes, [name, node]) => ({ .reduce((nodes, [name, node]) => ({
@@ -268,6 +275,10 @@ export default class Editor {
} }
} }
markAttrs(type = null) {
return this.activeMarkAttrs[type]
}
isActive(type = null, attrs = {}) { isActive(type = null, attrs = {}) {
const types = { const types = {
...this.activeMarks, ...this.activeMarks,