encrypt/gancio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

restore menububble in editor

Browse Source
This commit is contained in:
les
2020-02-09 18:14:44 +01:00
parent cff31a7272
commit 6da1cce5b0
1 changed files with 35 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
components/Editor.vue
View File

@@ -1,26 +1,28 @@
<template lang='pug'> <template lang='pug'>
.editor(:class='{ "with-border": border }') .editor(:class='{ "with-border": border }')
editor-menu-bar.menubar(:editor='editor' v-slot='{ commands, isActive, getMarkAttrs, focused }') editor-menu-bubble(:editor='editor' :keep-in-bounds='true' v-slot='{ commands, isActive, getMarkAttrs, menu }')
el-button-group el-button-group.menububble(:class="{ 'is-active': menu.isActive }" :style="`left: ${menu.left}px; bottom: ${menu.bottom}px;`")
el-popover(trigger='hover' placement='bottom-start') el-popover(trigger='hover' placement='bottom-start')
el-button.float-left(slot='reference' size='mini') <v-icon name='question'/> el-button.float-left(slot='reference' size='mini') <v-icon name='question'/>
template template
div <v-icon name='heading'/> → Title ⇒ <code>ctrl+shift+4</code> or start a line with <code>#</code> span This editor supports inline <code>markdown</code>
div <v-icon name='bold'/> → Bold ⇒ <code>ctrl+b</code> div <v-icon name='heading'/> → Title ⇒ Start a line with <code>#</code>
div <v-icon name='italic'/> → Italic ⇒ <code>ctrl+i</code> div <v-icon name='bold'/> → Bold ⇒ <code>ctrl+b</code>
div <v-icon name='underline'/> → Underline ⇒ <code>ctrl+u</code> div <v-icon name='italic'/> → Italic ⇒ <code>ctrl+i</code>
div <v-icon name='list-ul'/> → List ⇒ <code>ctrl+shift+8</code> or start a line with <code>-</code> div <v-icon name='underline'/> → Underline ⇒ <code>ctrl+u</code>
div <v-icon name='list-ol'/> → Ordered List ⇒ <code>ctrl+shift+9</code> or start a line with <code>1.</code> div <v-icon name='list-ul'/> → List ⇒ Start a line with <code>-</code>
div <v-icon name='quote-right'/> → Quote ⇒ <code>ctrl+shift+&gt;</code> or start a line with <code>&gt;</code> div <v-icon name='list-ol'/> → Ordered List ⇒ Start a line with <code>1.</code>
div <v-icon name='link'/> → Link ⇒ Select a word and fill the input div <v-icon name='quote-right'/> → Quote ⇒ Start a line with <code>&gt;</code>
el-button(size='mini' :class='{ "is-active": isActive.heading({level:4})}' @click='commands.heading({level: 4})') <v-icon name='heading'/> div <v-icon name='code'/> → Code ⇒ Use backtick <code>`</code>
el-button(size='mini' :class='{ "is-active": isActive.bold() }' @click='commands.bold') div <v-icon name='link'/> → Link ⇒ Select a word and fill the input
<v-icon name='bold' /> //- el-button(size='mini' :class='{ "is-active": isActive.heading({level:4})}' @click='commands.heading({level: 4})') <v-icon name='heading'/>
el-button(size='mini' :class='{ "is-active": isActive.italic() }' @click='commands.italic') <v-icon name='italic'/> //- el-button(size='mini' :class='{ "is-active": isActive.bold() }' @click='commands.bold')
el-button(size='mini' :class='{ "is-active": isActive.underline() }' @click='commands.underline') <v-icon name='underline'/> <v-icon name='bold' />
el-button(size='mini' :class='{ "is-active": isActive.link() }' @click='commands.link({href: ""}); $refs.link.focus(); linkActive=true') <v-icon name='link'/> //- el-button(size='mini' :class='{ "is-active": isActive.italic() }' @click='commands.italic') <v-icon name='italic'/>
input(:value='isActive.link() && getMarkAttrs("link") && getMarkAttrs("link").href || ""' ref='link' :class='{ "is-active": isActive.link() || linkActive }' //- el-button(size='mini' :class='{ "is-active": isActive.underline() }' @click='commands.underline') <v-icon name='underline'/>
@blur='commands.link({ href: $event.target.value})' @keypress.enter='commands.link({ href: $event.target.value})') el-button(size='mini' :class='{ "is-active": isActive.link() }' @click='commands.link({href: ""}); $refs.link.focus(); linkActive=true') <v-icon name='link'/>
input(:value='isActive.link() && getMarkAttrs("link") && getMarkAttrs("link").href || ""' ref='link' :class='{ "is-active": isActive.link() || linkActive }'
placeholder='https://' @keypress.enter='commands.link({ href: $event.target.value})')
//- el-button(size='mini' :class='{ "is-active": isActive.strike() }' @click='commands.strike') <v-icon name='strikethrough'/> //- el-button(size='mini' :class='{ "is-active": isActive.strike() }' @click='commands.strike') <v-icon name='strikethrough'/>
//- br //- br
//- el-button-group //- el-button-group
@@ -98,7 +100,9 @@ export default {
<style lang='less'> <style lang='less'>
.editor { .editor {
position: relative;
overflow-y: auto; overflow-y: auto;
padding-top: 1.7em;
scrollbar-width: thin; scrollbar-width: thin;
&.with-border { &.with-border {
@@ -113,17 +117,23 @@ export default {
overflow-y: auto; overflow-y: auto;
} }
.menubar { .menububble {
position: sticky; position: absolute;
display: flex; display: flex;
top: 0px;
overflow: hidden; overflow: hidden;
opacity: 0;
z-index: 1; z-index: 1;
background: #dddddd; background: #dddddd;
transform: translateX(-50%);
border-radius: 3px; border-radius: 3px;
padding: 0.1rem; padding: 0.07rem;
transition: opacity 0.2s, visibility 0.2s, left .2s, bottom .2s; transition: opacity 0.2s, visibility 0.2s, left .2s, bottom .2s;
visibility: hidden;
&.is-active {
opacity: 1;
visibility: visible;
}
input { input {
padding: 0; padding: 0;
margin: 1px; margin: 1px;