ayanova/src/components/wiki-control.vue

@@ -54,10 +54,18 @@
             <v-btn depressed tile class="ml-1" @click="clickLine">
               <v-icon>fa-minus</v-icon></v-btn
             >
-            <v-btn depressed tile> <v-icon>fa-quote-left</v-icon></v-btn>
-            <v-btn depressed tile> <v-icon>fa-list-ul</v-icon></v-btn>
-            <v-btn depressed tile> <v-icon>fa-list-ol</v-icon></v-btn>
-            <v-btn depressed tile> <v-icon>fa-check-square</v-icon></v-btn>
+            <v-btn depressed tile @click="clickQuote">
+              <v-icon>fa-quote-left</v-icon></v-btn
+            >
+            <v-btn depressed tile @click="clickUl">
+              <v-icon>fa-list-ul</v-icon></v-btn
+            >
+            <v-btn depressed tile @click="clickOl">
+              <v-icon>fa-list-ol</v-icon></v-btn
+            >
+            <v-btn depressed tile @click="clickTask">
+              <v-icon>fa-check-square</v-icon></v-btn
+            >
             <v-btn depressed tile class="ml-1">
               <v-icon>fa-table</v-icon></v-btn
             >
@@ -100,7 +108,13 @@ export default {
     return {
       localVal: this.value,
       currentView: 0,
-      selection: { start: 0, end: 0, hasSelection: false }
+      selection: {
+        start: 0,
+        end: 0,
+        startOfBlock: 0, //block meaning first character after last linefeed before or at start of selection
+        endOfBlock: 0, //end of block meaning selection expanded to end of line (unless there isn't one)
+        hasSelection: false
+      }
     };
   },
   props: {
@@ -118,6 +132,32 @@ export default {
       this.selection.start = bodyTextArea.selectionStart;
       this.selection.end = bodyTextArea.selectionEnd;
       this.selection.hasSelection = this.selection.start != this.selection.end;
+
+      //block selection
+      //start of block...
+      //default
+      this.selection.startOfBlock = this.selection.start;
+      if (this.selection.start > 0) {
+        //find linefeed prior to current start
+        let indexOfLineFeed = this.localVal.lastIndexOf(
+          "\n",
+          this.selection.start
+        );
+        if (indexOfLineFeed != -1) {
+          this.selection.startOfBlock = indexOfLineFeed + 1;
+        }
+      }
+
+      //end of block
+      //default
+      this.selection.endOfBlock = this.selection.end;
+      if (this.selection.end > 0) {
+        //find linefeed prior to current start
+        let indexOfLineFeed = this.localVal.indexOf("\n", this.selection.end);
+        if (indexOfLineFeed != -1) {
+          this.selection.endOfBlock = indexOfLineFeed;
+        }
+      }
     },
     setSelectedRange(start, end) {
       let bodyTextArea = this.$refs.editArea.$el.querySelector("textarea");
@@ -131,7 +171,7 @@ export default {
           this.selection.end
         );
       }
-      return selectedText; //.trim();
+      return selectedText;
     },
     replaceSelectedText(newString) {
       this.localVal = window.$gz.util.stringSplice(
@@ -141,6 +181,24 @@ export default {
         newString
       );
     },
+    getSelectedBlock() {
+      let selectedText = "";
+      if (this.selection.hasSelection) {
+        selectedText = this.localVal.substring(
+          this.selection.startOfBlock,
+          this.selection.endOfBlock
+        );
+      }
+      return selectedText; //.trim();
+    },
+    replaceSelectedBlock(newString) {
+      this.localVal = window.$gz.util.stringSplice(
+        this.localVal,
+        this.selection.startOfBlock,
+        this.selection.endOfBlock - this.selection.start,
+        newString
+      );
+    },
     handleDoubleClick(i) {
       //the purpose of this is only to change the selection if it's got an extra space to the right
       //because double clicking on a word with another word after it causes the space to be included
@@ -244,7 +302,33 @@ export default {
     },
     clickCodeBlock() {
       this.getSelectedRange();
-      this.replaceSelectedText("\n```\n" + this.getSelectedText() + "\n```\n");
+      this.replaceSelectedBlock("\n```" + this.getSelectedBlock() + "\n```\n");
+    },
+
+    clickQuote() {
+      this.getSelectedRange();
+      if (this.selection.hasSelection) {
+        console.log("quote selected text:[" + this.getSelectedText() + "]");
+        console.log("quote selected block:[" + this.getSelectedBlock() + "]");
+
+        this.replaceSelectedBlock("\n>" + this.getSelectedBlock() + "\n");
+      } else {
+        this.replaceSelectedText("\n>");
+      }
+    },
+    clickUl() {
+      //if a selected block with several lines then prepend each line
+      //if a selected block with one line only then prepend start of first line after last linefeed
+      this.getSelectedRange();
+      this.replaceSelectedText("`" + this.getSelectedText() + "`");
+    },
+    clickOl() {
+      this.getSelectedRange();
+      this.replaceSelectedText("`" + this.getSelectedText() + "`");
+    },
+    clickTask() {
+      this.getSelectedRange();
+      this.replaceSelectedText("`" + this.getSelectedText() + "`");
     }
   }
 };