remove toggleSearch command

This commit is contained in:
Philipp Kühn 2019-06-04 22:20:27 +02:00
parent 17c1e8cf46
commit d759eb4d9d
3 changed files with 50 additions and 75 deletions

View File

@ -105,34 +105,25 @@
<icon name="redo" />
</button>
<span
class="menubar__button"
@click="editor.commands.toggleSearch"
>
Search
<div
class="search-modal"
@click.stop
v-if="editor.extensions.options.search.searching"
>
<div class="search">
<input
ref="search"
@keydown.enter.prevent="editor.commands.find(searchTerm)"
placeholder="Search..."
placeholder="Search …"
type="text"
v-model="searchTerm"
><input
/>
<input
@keydown.enter.prevent="editor.commands.replace(replaceWith)"
placeholder="Replace..."
placeholder="Replace …"
type="text"
v-model="replaceWith"
>
<button @click="editor.commands.find(searchTerm)">Find</button>
<button @click="editor.commands.clearSearch()">Clear</button>
<button @click="editor.commands.replace(replaceWith)">Replace</button>
<button @click="editor.commands.replaceAll(replaceWith)">Replace All</button>
/>
<button class="button" @click="editor.commands.find(searchTerm)">Find</button>
<button class="button" @click="editor.commands.clearSearch()">Clear</button>
<button class="button" @click="editor.commands.replace(replaceWith)">Replace</button>
<button class="button" @click="editor.commands.replaceAll(replaceWith)">Replace All</button>
</div>
</span>
</div>
</editor-menu-bar>
@ -173,7 +164,7 @@ export default {
},
data() {
return {
searching: false,
// searching: false,
searchTerm: null,
replaceWith: null,
editor: new Editor({
@ -199,16 +190,6 @@ export default {
new Underline(),
new History(),
],
onUpdate: ({ getJSON }) => {
this.json = getJSON()
},
onToggleSearch: searching => {
this.$nextTick(() => {
if (searching) {
this.$refs.search.focus()
}
})
},
content: `
<h2>
Hi there,
@ -240,22 +221,31 @@ export default {
}
</script>
<style>
.menubar__button {
position: relative;
<style lang="scss">
@import "~variables";
.search {
display: flex;
flex-wrap: wrap;
background-color: rgba($color-black, 0.1);
padding: 0.5rem;
border-radius: 5px;
margin-top: 1rem;
input {
padding: 0.25rem;
border: 0;
border-radius: 3px;
margin-right: 0.2rem;
font: inherit;
font-size: 0.8rem;
width: 20%;
flex: 1;
}
.search-modal {
position: absolute;
top: 100%;
display: flex;
background: #fff;
padding: .5em;
box-shadow: 0 2px 4px #0003;
border-radius: 2px;
left: 0;
margin-top: 0.25em;
border: solid 2px;
button {
}
}
.find {

View File

@ -72,6 +72,10 @@ h3 {
border-radius: 3px;
cursor: pointer;
background-color: rgba($color-black, 0.1);
&:hover {
background-color: rgba($color-black, 0.15);
}
}
.message {

View File

@ -15,10 +15,6 @@ export default class Search extends Extension {
return 'search'
}
init() {
this.editor.events.push('toggleSearch')
}
get defaultOptions() {
return {
autoSelectNext: true,
@ -30,27 +26,12 @@ export default class Search extends Extension {
}
}
toggleSearch() {
return () => {
this.options.searching = !this.options.searching
this.editor.emit('toggleSearch', this.options.searching)
return true
}
}
keys() {
return {
'Mod-f': this.toggleSearch(),
}
}
commands() {
return {
find: attrs => this.find(attrs),
replace: attrs => this.replace(attrs),
replaceAll: attrs => this.replaceAll(attrs),
clearSearch: () => this.clear(),
toggleSearch: () => this.toggleSearch(),
}
}