IT4Change/Ocelot-Social
3
0
Fork 0
mirror of https://github.com/IT4Change/Ocelot-Social.git synced 2025-12-13 07:45:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improved linking in editor

Browse Source
This commit is contained in:
Grzegorz Leoniec 2019-02-05 17:14:03 +01:00
parent a831f91314
commit 31bc10842b
No known key found for this signature in database
GPG Key ID: 3AA43686D4EB1377
1 changed files with 21 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
components/Editor/Editor.vue
View File

@ -2,6 +2,7 @@
<div class="editor"> <div class="editor">
<editor-menu-bubble :editor="editor"> <editor-menu-bubble :editor="editor">
<div <div
ref="menu"
slot-scope="{ commands, getMarkAttrs, isActive, menu }" slot-scope="{ commands, getMarkAttrs, isActive, menu }"
class="menububble tooltip" class="menububble tooltip"
x-placement="top" x-placement="top"
@ -13,7 +14,10 @@
<ds-input <ds-input
ref="linkInput" ref="linkInput"
v-model="linkUrl" v-model="linkUrl"
class="editor-menu-link-input"
placeholder="http://" placeholder="http://"
@blur.native.capture="hideMenu(menu.isActive)"
@keydown.native.esc.prevent="hideMenu(menu.isActive)"
@keydown.native.enter.prevent="setLinkUrl(commands.link, linkUrl)" @keydown.native.enter.prevent="setLinkUrl(commands.link, linkUrl)"
/> />
</template> </template>
@ -23,7 +27,8 @@
size="small" size="small"
:hover="isActive.bold()" :hover="isActive.bold()"
ghost ghost
@click.prevent="commands.bold" @click.prevent="() => {}"
@mousedown.native.prevent="commands.bold"
> >
<ds-icon name="bold" /> <ds-icon name="bold" />
</ds-button> </ds-button>
@ -33,7 +38,8 @@
size="small" size="small"
:hover="isActive.italic()" :hover="isActive.italic()"
ghost ghost
@click.prevent="commands.italic" @click.prevent="() => {}"
@mousedown.native.prevent="commands.italic"
> >
<ds-icon name="italic" /> <ds-icon name="italic" />
</ds-button> </ds-button>
@ -43,7 +49,8 @@
size="small" size="small"
:hover="isActive.link()" :hover="isActive.link()"
ghost ghost
@click="showLinkMenu(getMarkAttrs('link'))" @click.prevent="() => {}"
@mousedown.native.prevent="showLinkMenu(getMarkAttrs('link'))"
> >
<ds-icon name="link" /> <ds-icon name="link" />
</ds-button> </ds-button>
@ -214,16 +221,6 @@ export default {
} }
} }
}, },
mounted() {
const keydownListener = document.addEventListener('keydown', e => {
if (this.linkMenuIsActive && e.keyCode === 27) {
this.hideLinkMenu()
}
})
this.$once('hook:beforeDestroy', () => {
document.removeEventListener('keydown', keydownListener)
})
},
beforeDestroy() { beforeDestroy() {
this.editor.destroy() this.editor.destroy()
}, },
@ -250,6 +247,11 @@ export default {
hideLinkMenu() { hideLinkMenu() {
this.linkUrl = null this.linkUrl = null
this.linkMenuIsActive = false this.linkMenuIsActive = false
this.editor.focus()
},
hideMenu(isActive) {
isActive = false
this.hideLinkMenu()
}, },
setLinkUrl(command, url) { setLinkUrl(command, url) {
command({ href: url }) command({ href: url })
@ -336,6 +338,12 @@ li > p {
.tooltip-arrow { .tooltip-arrow {
left: calc(50% - 10px); left: calc(50% - 10px);
} }
input,
button {
border: none;
border-radius: 2px;
}
} }
// p:not(.is-empty) { // p:not(.is-empty) {