ayanova/src/components/wiki-control.vue

@@ -37,13 +37,13 @@
         <!-- BUTTONS -->
         <v-col v-if="showDesigner()" :cols="12">
           <div>
-            <v-btn depressed tile @click="clickBold">
+            <v-btn depressed tile @click="editClick('bold')">
               <v-icon>fa-bold</v-icon></v-btn
             >
-            <v-btn depressed tile @click="clickItalic">
+            <v-btn depressed tile @click="editClick('italic')">
               <v-icon>fa-italic</v-icon></v-btn
             >
-            <v-btn depressed tile @click="clickStrike">
+            <v-btn depressed tile @click="editClick('strike')">
               <v-icon>fa-strikethrough</v-icon></v-btn
             >
 
@@ -54,32 +54,32 @@
                 </v-btn>
               </template>
               <v-list>
-                <v-list-item @click="clickHeading(1)">
+                <v-list-item @click="editClick('heading', 1)">
                   <v-list-item-title
                     ><h1>{{ $ay.t("Heading") }} 1</h1></v-list-item-title
                   >
                 </v-list-item>
-                <v-list-item @click="clickHeading(2)">
+                <v-list-item @click="editClick('heading', 2)">
                   <v-list-item-title
                     ><h2>{{ $ay.t("Heading") }} 2</h2></v-list-item-title
                   >
                 </v-list-item>
-                <v-list-item @click="clickHeading(3)">
+                <v-list-item @click="editClick('heading', 3)">
                   <v-list-item-title
                     ><h3>{{ $ay.t("Heading") }} 3</h3></v-list-item-title
                   >
                 </v-list-item>
-                <v-list-item @click="clickHeading(4)">
+                <v-list-item @click="editClick('heading', 4)">
                   <v-list-item-title
                     ><h4>{{ $ay.t("Heading") }} 4</h4></v-list-item-title
                   >
                 </v-list-item>
-                <v-list-item @click="clickHeading(5)">
+                <v-list-item @click="editClick('heading', 5)">
                   <v-list-item-title
                     ><h5>{{ $ay.t("Heading") }} 5</h5></v-list-item-title
                   >
                 </v-list-item>
-                <v-list-item @click="clickHeading(6)">
+                <v-list-item @click="editClick('heading', 6)">
                   <v-list-item-title
                     ><h6>{{ $ay.t("Heading") }} 6</h6></v-list-item-title
                   >
@@ -87,19 +87,19 @@
               </v-list>
             </v-menu>
 
-            <v-btn depressed tile class="ml-1" @click="clickLine">
+            <v-btn depressed tile class="ml-1" @click="editClick('line')">
               <v-icon>fa-minus</v-icon></v-btn
             >
-            <v-btn depressed tile @click="clickQuote">
+            <v-btn depressed tile @click="editClick('quote')">
               <v-icon>fa-quote-left</v-icon></v-btn
             >
-            <v-btn depressed tile @click="clickUl">
+            <v-btn depressed tile @click="editClick('ul')">
               <v-icon>fa-list-ul</v-icon></v-btn
             >
-            <v-btn depressed tile @click="clickOl">
+            <v-btn depressed tile @click="editClick('ol')">
               <v-icon>fa-list-ol</v-icon></v-btn
             >
-            <v-btn depressed tile @click="clickTask">
+            <v-btn depressed tile @click="editClick('task')">
               <v-icon>fa-check-square</v-icon></v-btn
             >
 
@@ -143,7 +143,7 @@
                   <v-btn text @click="tableMenu = false">{{
                     $ay.t("Cancel")
                   }}</v-btn>
-                  <v-btn color="primary" text @click="clickTable">{{
+                  <v-btn color="primary" text @click="editClick('table')">{{
                     $ay.t("OK")
                   }}</v-btn>
                 </v-card-actions>
@@ -181,18 +181,20 @@
                   <v-btn text @click="linkMenu = false">{{
                     $ay.t("Cancel")
                   }}</v-btn>
-                  <v-btn color="primary" text @click="clickLink">{{
+                  <v-btn color="primary" text @click="editClick('link')">{{
                     $ay.t("OK")
                   }}</v-btn>
                 </v-card-actions>
               </v-card>
             </v-menu>
 
-            <v-btn depressed tile> <v-icon>fa-image</v-icon></v-btn>
+            <v-btn depressed tile @click="editClick('image')">
-            <v-btn depressed tile class="ml-1" @click="clickCode">
+              <v-icon>fa-image</v-icon></v-btn
+            >
+            <v-btn depressed tile class="ml-1" @click="editClick('code')">
               <v-icon>fa-code</v-icon></v-btn
             >
-            <v-btn depressed tile @click="clickCodeBlock">
+            <v-btn depressed tile @click="editClick('codeblock')">
               <v-icon>fa-square-full</v-icon></v-btn
             >
           </div>
@@ -490,40 +492,105 @@ export default {
     visibleIcon() {
       return this.wikiVisible ? "fa-eye-slash" : "fa-eye";
     },
-
+    //EDITING
-    clickBold() {
+    editClick(editType, ex) {
-      this.getSelectedRange();
+      if (editType != "heading") {
-      this.replaceSelectedText("**" + this.getSelectedText() + "**");
+        this.getSelectedRange();
-      this.handleInput(this.localVal);
+      }
-    },
+      switch (editType) {
-    clickItalic() {
+        case "bold":
-      this.getSelectedRange();
+          this.replaceSelectedText("**" + this.getSelectedText() + "**");
-      this.replaceSelectedText("*" + this.getSelectedText() + "*");
+          break;
-    },
+        case "italic":
-    clickStrike() {
+          this.replaceSelectedText("*" + this.getSelectedText() + "*");
-      this.getSelectedRange();
+          break;
-      this.replaceSelectedText("~~" + this.getSelectedText() + "~~");
+        case "strike":
-    },
+          this.replaceSelectedText("~~" + this.getSelectedText() + "~~");
-    clickHeading(h) {
+          break;
-      this.getSelectedRange(true);
+        case "line":
-      let prepend = "#".repeat(h) + " ";
+          this.replaceSelectedText("***");
-      // if (this.selection.hasSelection) {
+          break;
-      let s = this.getSelectedBlock();
+        case "heading":
-
+          this.getSelectedRange(true); //special forces
-      s = s.replace(/\n/gi, "\n" + prepend);
+          {
-      if (s.length > 0 && s[0] != "\n") {
+            let prepend = "#".repeat(ex) + " ";
-        s = prepend + s;
+            let s = this.getSelectedBlock();
+            s = s.replace(/\n/gi, "\n" + prepend);
+            if (s.length > 0 && s[0] != "\n") {
+              s = prepend + s;
+            }
+          }
+          this.replaceSelectedBlock(s);
+          break;
+        case "code":
+          throw "NOT IMPLEMENTED";
+          break;
+        case "codeblock":
+          throw "NOT IMPLEMENTED";
+          break;
+        case "quote":
+          throw "NOT IMPLEMENTED";
+          break;
+        case "ul":
+          throw "NOT IMPLEMENTED";
+          break;
+        case "ol":
+          throw "NOT IMPLEMENTED";
+          break;
+        case "task":
+          throw "NOT IMPLEMENTED";
+          break;
+        case "table":
+          throw "NOT IMPLEMENTED";
+          break;
+        case "link":
+          throw "NOT IMPLEMENTED";
+          break;
+        case "image":
+          throw "NOT IMPLEMENTED";
+          break;
+        default:
+          throw "NOT IMPLEMENTED";
+          break;
       }
 
-      this.replaceSelectedBlock(s);
+      //emit input event to parent form for dirty tracking
-      // } else {
+      this.handleInput(this.localVal);
-      //   this.replaceSelectedText("\n" + prepend);
-      // }
-    },
-    clickLine() {
-      this.getSelectedRange();
-      this.replaceSelectedText("***");
     },
+
+    // clickBold() {
+    //   this.getSelectedRange();
+    //   this.replaceSelectedText("**" + this.getSelectedText() + "**");
+    //   this.handleInput(this.localVal);
+    // },
+    // clickItalic() {
+    //   this.getSelectedRange();
+    //   this.replaceSelectedText("*" + this.getSelectedText() + "*");
+    // // },
+    // clickStrike() {
+    //   this.getSelectedRange();
+    //   this.replaceSelectedText("~~" + this.getSelectedText() + "~~");
+    // },
+    // clickHeading(h) {
+    //   this.getSelectedRange(true);
+    //   let prepend = "#".repeat(h) + " ";
+    //   // if (this.selection.hasSelection) {
+    //   let s = this.getSelectedBlock();
+
+    //   s = s.replace(/\n/gi, "\n" + prepend);
+    //   if (s.length > 0 && s[0] != "\n") {
+    //     s = prepend + s;
+    //   }
+
+    //   this.replaceSelectedBlock(s);
+    //   // } else {
+    //   //   this.replaceSelectedText("\n" + prepend);
+    //   // }
+    // },
+    // clickLine() {
+    //   this.getSelectedRange();
+    //   this.replaceSelectedText("***");
+    // },
     clickCode() {
       this.getSelectedRange();
       this.replaceSelectedText("`" + this.getSelectedText() + "`");