ayanova/src/api/translation.js

@@ -158,7 +158,8 @@ export default {
     "PageOfPageText",
     "Loading",
     "DataListView",
-    "FilterUnsaved"
+    "FilterUnsaved",
+    "Heading"
   ],
 
   ////////////////////////////////////////////////////////

ayanova/src/components/wiki-control.vue

@@ -46,7 +46,48 @@
             <v-btn depressed tile @click="clickStrike">
               <v-icon>fa-strikethrough</v-icon></v-btn
             >
-            <v-btn depressed tile> <v-icon>fa-heading</v-icon></v-btn>
+
+            <!-- <v-btn depressed tile> <v-icon>fa-heading</v-icon></v-btn> -->
+            <v-menu offset-y>
+              <template v-slot:activator="{ on }">
+                <v-btn depressed tile v-on="on">
+                  <v-icon>fa-heading</v-icon>
+                </v-btn>
+              </template>
+              <v-list>
+                <v-list-item @click="clickHeading(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-title
+                    ><h2>{{ $ay.t("Heading") }} 2</h2></v-list-item-title
+                  >
+                </v-list-item>
+                <v-list-item @click="clickHeading(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-title
+                    ><h4>{{ $ay.t("Heading") }} 4</h4></v-list-item-title
+                  >
+                </v-list-item>
+                <v-list-item @click="clickHeading(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-title
+                    ><h6>{{ $ay.t("Heading") }} 6</h6></v-list-item-title
+                  >
+                </v-list-item>
+              </v-list>
+            </v-menu>
+
             <v-btn depressed tile class="ml-1" @click="clickLine">
               <v-icon>fa-minus</v-icon></v-btn
             >
@@ -161,10 +202,22 @@ export default {
         return false; //false attributes don't get rendered
       }
     },
-    getSelectedRange() {
+    getSelectedRange(forceBlock) {
       let bodyTextArea = this.$refs.editArea.$el.querySelector("textarea");
       this.selection.start = bodyTextArea.selectionStart;
       this.selection.end = bodyTextArea.selectionEnd;
+
+      //some edits only work on a block so if user is just clicked on a line then add make a selection
+      if (forceBlock) {
+        //add a character to selection forward if possible but if not then go backward one
+        if (this.selection.end < this.localVal.length) {
+          this.selection.end++;
+        } else {
+          if (this.selection.start > 0) {
+            this.selection.start--;
+          }
+        }
+      }
       this.selection.hasSelection = this.selection.start != this.selection.end;
 
       //block selection
@@ -229,7 +282,7 @@ export default {
       this.localVal = window.$gz.util.stringSplice(
         this.localVal,
         this.selection.startOfBlock,
-        this.selection.endOfBlock - this.selection.start,
+        this.selection.endOfBlock - this.selection.startOfBlock,
         newString
       );
     },
@@ -332,6 +385,22 @@ export default {
       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("***");
@@ -342,7 +411,9 @@ export default {
     },
     clickCodeBlock() {
       this.getSelectedRange();
-      this.replaceSelectedBlock("\n```" + this.getSelectedBlock() + "\n```\n");
+      this.replaceSelectedBlock(
+        "\n```\n" + this.getSelectedBlock() + "\n```\n"
+      );
     },
 
     clickQuote() {
@@ -419,6 +490,7 @@ todo: all editing controls enabled
   - determine how local images will be handled (attachments)
     baseurl setting for local images: https://marked.js.org/#/USING_ADVANCED.md#options
 
+
 todo: replace all redundant clickXXX functions with a single function and a flag indicating what to do
 todo: Undo / redo (ctrl-z / ctrl-y) ability?
   - may need a library for this one if it's tricky to support levels of undo
@@ -436,7 +508,8 @@ Clean up the example markdown, go through and use mine and sprinkle in the marke
   - Maybe make a key image and put on our server for wiki example so we can if we feel like  it track usage of demo data
   - Put a block of emojis in it with a link to the help docs regarding emojis for extra coolness
 
-todo: STYLE OUTPUT CSS
+todo: STYLE /  OUTPUT CSS
+  - why is it indenting the start of a code block?
   - Check with marked to see what css they use or require or something, maybe I'm missing something they have on their site before I roll my own
   - Style the task markdown output, it looks pretty bleak right now
   I stole the css from toast it's in the notes, search for task-list-item