fix link example
This commit is contained in:
@@ -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()
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -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),
|
||||||
}))
|
}))
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -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),
|
||||||
}))
|
}))
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -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),
|
||||||
}))
|
}))
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -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,
|
||||||
|
|||||||
Reference in New Issue
Block a user