remove toggleSearch command

examples/Components/Routes/SearchAndReplace/index.vue

@@ -105,34 +105,25 @@
           <icon name="redo" />
         </button>
 
-        <span
+        <div class="search">
-            class="menubar__button"
-            @click="editor.commands.toggleSearch"
-        >
-          Search
-          <div
-              class="search-modal"
-              @click.stop
-              v-if="editor.extensions.options.search.searching"
-          >
           <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 class="button" @click="editor.commands.find(searchTerm)">Find</button>
-            <button @click="editor.commands.clearSearch()">Clear</button>
+          <button class="button" @click="editor.commands.clearSearch()">Clear</button>
-            <button @click="editor.commands.replace(replaceWith)">Replace</button>
+          <button class="button" @click="editor.commands.replace(replaceWith)">Replace</button>
-            <button @click="editor.commands.replaceAll(replaceWith)">Replace All</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>
+<style lang="scss">
-  .menubar__button {
+@import "~variables";
-    position: relative;
+
+.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 {
+  button {
-    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;
 }
 
 .find {

examples/assets/sass/main.scss

@@ -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 {

packages/tiptap-extensions/src/extensions/Search.js

@@ -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(),
     }
   }