placeholder text

bastihilger · Feb 10, 2021 · 9f915de · 9f915de
1 parent da17a64
commit 9f915de
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 30 deletions.
diff --git a/dist/js/field.js b/dist/js/field.js
diff --git a/resources/js/components/FormField.vue b/resources/js/components/FormField.vue
@@ -354,13 +354,10 @@ export default {
     position: absolute;
     top: 36px;
     left: -130px;
-    display: flex;
-    background-color: white;
-    align-items: center;
 }
 
 .tiptap-button-form .form-input {
-    width: 180px;
+    width: 300px;
     margin-right: 20px;
     color: black;
 }

diff --git a/resources/js/components/buttons/LinkButton.vue b/resources/js/components/buttons/LinkButton.vue
@@ -5,35 +5,38 @@
                 tiptap-button-form
                 btn
                 btn-default
+                h-auto bg-white
                 p-2
                 z-10
             "
             v-show="linkMenuIsActive"
             @submit.prevent="setLinkUrl(commands.link, linkUrl)"
         >
-            <input
-                class="
-                    form-input
-                    form-input-bordered
-                    p-1
-                    text-xs
-                    leading-none
-                "
-                type="text"
-                v-model="linkUrl"
-                placeholder="https://"
-                ref="linkInput"
-                @keydown.esc="hideLinkMenu"
-            />
+            <div class="flex justify-between items-center">
+                <input
+                    class="
+                        form-input
+                        form-input-bordered
+                        p-1
+                        text-xs
+                        leading-none
+                    "
+                    type="text"
+                    v-model="linkUrl"
+                    placeholder="start external links with https:// or http://"
+                    ref="linkInput"
+                    @keydown.esc="hideLinkMenu"
+                />
 
-            <button
-                class="btn is-close"
-                @click="setLinkUrl(commands.link, null)"
-                type="button"
-            >
-                <font-awesome-icon :icon="['fas', 'times-circle']">
-                </font-awesome-icon>
-            </button>
+                <button
+                    class="btn is-close"
+                    @click="setLinkUrl(commands.link, null)"
+                    type="button"
+                >
+                    <font-awesome-icon :icon="['fas', 'times-circle']">
+                    </font-awesome-icon>
+                </button>
+            </div>
         </form>
 
         <button
@@ -105,6 +108,3 @@ export default {
     },
 }
 </script>
-
-
-