ayanova/src/components/wiki-control.vue

@@ -47,6 +47,7 @@
               <v-icon>fa-strikethrough</v-icon></v-btn
             >
 
+            <!-- HEADINGS -->
             <v-menu offset-y>
               <template v-slot:activator="{ on }">
                 <v-btn depressed tile v-on="on">
@@ -86,7 +87,9 @@
                 </v-list-item>
               </v-list>
             </v-menu>
+            <!-- /HEADINGS -->
 
+            <!-- MORE BUTTONS -->
             <v-btn depressed tile class="ml-1" @click="editClick('line')">
               <v-icon>fa-minus</v-icon></v-btn
             >
@@ -103,6 +106,7 @@
               <v-icon>fa-check-square</v-icon></v-btn
             >
 
+            <!-- TABLES -->
             <v-menu
               v-model="tableMenu"
               :close-on-content-click="false"
@@ -149,6 +153,9 @@
                 </v-card-actions>
               </v-card>
             </v-menu>
+            <!-- /TABLES -->
+
+            <!-- LINK -->
             <v-btn depressed tile @click="openLinkMenu">
               <v-icon>fa-link</v-icon>
             </v-btn>
@@ -157,8 +164,8 @@
               v-model="linkMenu"
               :close-on-content-click="false"
               offset-y
-              :position-x="linkMenuX"
+              :position-x="menuX"
-              :position-y="linkMenuY"
+              :position-y="menuY"
               absolute
             >
               <v-card width="300">
@@ -187,16 +194,59 @@
                 </v-card-actions>
               </v-card>
             </v-menu>
+            <!-- /LINKS -->
 
-            <v-btn depressed tile @click="editClick('image')">
+            <!-- IMAGE -->
-              <v-icon>fa-image</v-icon></v-btn
+
+            <v-btn depressed tile @click="openImageMenu">
+              <v-icon>fa-image</v-icon>
+            </v-btn>
+            <v-menu
+              min-width="300"
+              v-model="imageMenu"
+              :close-on-content-click="false"
+              offset-y
+              :position-x="menuX"
+              :position-y="menuY"
+              absolute
             >
+              <v-card width="300">
+                <v-card-title>{{ $ay.t("InsertImage") }}</v-card-title>
+
+                <div class="ma-8">
+                  <v-text-field
+                    v-model="imageUrl"
+                    :label="$ay.t('LinkUrl')"
+                  ></v-text-field>
+                  <v-text-field
+                    v-model="imageText"
+                    :label="$ay.t('LinkText')"
+                  ></v-text-field>
+                </div>
+
+                <v-card-actions>
+                  <v-spacer></v-spacer>
+
+                  <v-btn text @click="imageMenu = false">{{
+                    $ay.t("Cancel")
+                  }}</v-btn>
+                  <v-btn color="primary" text @click="editClick('image')">{{
+                    $ay.t("OK")
+                  }}</v-btn>
+                </v-card-actions>
+              </v-card>
+            </v-menu>
+
+            <!-- /IMAGE -->
+
+            <!-- CODE -->
             <v-btn depressed tile class="ml-1" @click="editClick('code')">
               <v-icon>fa-code</v-icon></v-btn
             >
             <v-btn depressed tile @click="editClick('codeblock')">
               <v-icon>fa-square-full</v-icon></v-btn
             >
+            <!-- END OF BUTTONS -->
           </div>
         </v-col>
         <!-- DESIGNER -->
@@ -281,10 +331,13 @@ export default {
       tableMenuColumns: 2,
       tableMenuRows: 2,
       linkMenu: false,
-      linkMenuX: 10,
+      menuX: 10,
-      linkMenuY: 10,
+      menuY: 10,
       linkUrl: "",
-      linkText: ""
+      linkText: "",
+      imageMenu: false,
+      imageUrl: "",
+      imageText: ""
     };
   },
   props: {
@@ -656,11 +709,22 @@ export default {
       this.linkMenu = false;
       this.getSelectedRange();
       this.linkText = this.getSelectedText();
-      this.linkMenuX = e.clientX;
+      this.menuX = e.clientX;
-      this.linkMenuY = e.clientY;
+      this.menuY = e.clientY;
       this.$nextTick(() => {
         this.linkMenu = true;
       });
+    },
+    openImageMenu(e) {
+      e.preventDefault();
+      this.imageMenu = false;
+      this.getSelectedRange();
+      this.linkText = this.getSelectedText();
+      this.menuX = e.clientX;
+      this.menuY = e.clientY;
+      this.$nextTick(() => {
+        this.imageMenu = true;
+      });
     }
   }
 };