From 0e246e843a0d3b2e7e6ead65392cb191a3054fc6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Tue, 20 Aug 2019 15:55:27 +0200
Subject: [PATCH] fix search replace example

---
 .../Routes/SearchAndReplace/index.vue         | 59 +++++++++----------
 1 file changed, 29 insertions(+), 30 deletions(-)

diff --git a/examples/Components/Routes/SearchAndReplace/index.vue b/examples/Components/Routes/SearchAndReplace/index.vue
index 5bc922d0..9c7236b5 100644
--- a/examples/Components/Routes/SearchAndReplace/index.vue
+++ b/examples/Components/Routes/SearchAndReplace/index.vue
@@ -104,38 +104,37 @@
         >
           <icon name="redo" />
         </button>
-
-        <div class="search">
-          <input
-            ref="search"
-            @keydown.enter.prevent="editor.commands.find(searchTerm)"
-            placeholder="Search …"
-            type="text"
-            v-model="searchTerm"
-          />
-          <input
-            @keydown.enter.prevent="editor.commands.replace(replaceWith)"
-            placeholder="Replace …"
-            type="text"
-            v-model="replaceWith"
-          />
-          <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>
-
       </div>
     </editor-menu-bar>
 
+    <div class="search">
+      <input
+        ref="search"
+        @keydown.enter.prevent="editor.commands.find(searchTerm)"
+        placeholder="Search …"
+        type="text"
+        v-model="searchTerm"
+      />
+      <input
+        @keydown.enter.prevent="editor.commands.replace(replaceWith)"
+        placeholder="Replace …"
+        type="text"
+        v-model="replaceWith"
+      />
+      <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>
+
     <editor-content class="editor__content" :editor="editor" />
   </div>
 </template>
@@ -224,7 +223,7 @@ export default {
   background-color: rgba($color-black, 0.1);
   padding: 0.5rem;
   border-radius: 5px;
-  margin-top: 1rem;
+  margin: 1rem 0;
 
   input {
     padding: 0.25rem;