diff --git a/ayanova/src/api/gzutil.js b/ayanova/src/api/gzutil.js
index 7aafee18..05c92451 100644
--- a/ayanova/src/api/gzutil.js
+++ b/ayanova/src/api/gzutil.js
@@ -147,7 +147,29 @@ export default {
     }
 
     return ret;
-  }, ///////////////////////////////
+  },
+  ///////////////////////////////
+  // Splice a string
+  //changes the content of a string by removing a range of
+  // characters and/or adding new characters.
+  //
+  // @param {String} source string
+  // @param {number} start Index at which to start changing the string.
+  // @param {number} delCount An integer indicating the number of old chars to remove.
+  // @param {string} newSubStr The String that is spliced in.
+  // @return {string} A new string with the spliced substring.
+  stringSplice: function(source, start, delCount, newSubStr) {
+    if (source == null || source == "") {
+      return "";
+    }
+    return (
+      source.slice(0, start) +
+      newSubStr +
+      this.slice(start + Math.abs(delCount))
+    );
+  },
+
+  ///////////////////////////////
   // ICON FOR *ALL* OBJECT TYPES
   //(used for search results and event log / history)
   //NOTE: Any object type could appear in event log, they all need to be supported where possible
diff --git a/ayanova/src/components/wiki-control.vue b/ayanova/src/components/wiki-control.vue
index bee1eaaa..6ec002ba 100644
--- a/ayanova/src/components/wiki-control.vue
+++ b/ayanova/src/components/wiki-control.vue
@@ -42,7 +42,9 @@
         <!-- v-show="showDesigner()" -->
         <v-col v-if="showDesigner()" :cols="currentView == 1 ? 6 : 12">
           <div>
-            <v-btn depressed tile> <v-icon>fa-bold</v-icon></v-btn>
+            <v-btn depressed tile @click="clickBold">
+              <v-icon>fa-bold</v-icon></v-btn
+            >
             <v-btn depressed tile> <v-icon>fa-italic</v-icon></v-btn>
             <v-btn depressed tile> <v-icon>fa-strikethrough</v-icon></v-btn>
             <v-btn depressed tile> <v-icon>fa-heading</v-icon></v-btn>
@@ -62,6 +64,7 @@
             <v-btn depressed tile> <v-icon>fa-square-full</v-icon></v-btn>
           </div>
           <v-textarea
+            ref="editArea"
             @input="handleInput"
             v-model="localVal"
             auto-grow
@@ -88,7 +91,8 @@ export default {
   data() {
     return {
       localVal: this.value,
-      currentView: 0
+      currentView: 0,
+      selection: { start: 0, end: 0, hasSelection: false }
     };
   },
   props: {
@@ -101,6 +105,47 @@ export default {
     }
   },
   methods: {
+    updateSelectedRange() {
+      let bodyTextArea = this.$refs.editArea.$el.querySelector("textarea");
+      this.selection.start = bodyTextArea.selectionStart;
+      this.selection.end = bodyTextArea.selectionEnd;
+      this.selection.hasSelection = this.selection.start != this.selection.end;
+    },
+    getSelectedText() {
+      let selectedText = "";
+      if (this.selection.hasSelection) {
+        selectedText = this.localVal.substring(
+          this.selection.start,
+          this.selection.end
+        );
+      }
+      return selectedText;
+    },
+    replaceSelectedText(newString) {
+      // @param {String} source string
+      // @param {number} start Index at which to start changing the string.
+      // @param {number} delCount An integer indicating the number of old chars to remove.
+      // @param {string} newSubStr The String that is spliced in.
+      // @return {string} A new string with the spliced substring.
+      //stringSplice: function(source, start, delCount, newSubStr) {
+        
+//says replace but in some cases it's just an insert if there is no selection:
+
+//has a selection so replace it is:
+
+      this.localVal = window.$gz.util.stringSplice(
+        this.localVal,
+        this.selection.start,
+        this.selection.end - this.selection.start,
+        newString
+      );
+    },
+    clickBold() {
+      this.updateSelectedRange();
+
+      console.log("BOLD CLICK, selection:", this.getSelectedText());
+    },
+
     handleInput(val) {
       this.$emit("input", val);
       this.localVal = val;
@@ -173,21 +218,15 @@ export default {
 };
 
 /**
-todo: test read only and read only no content
+
+todo: all editing controls enabled
+  - add image and link
+  - determine how local images will be handled (attachments)
+    baseurl setting for local images: https://marked.js.org/#/USING_ADVANCED.md#options
 
 todo: Add wikiContent field to form defintions at server so can hide or show in customization
   - Also for dataLists? (for reporting not grid I mean)
 
-if can't edit and no content then don't show at all
-  - does it need to have a column wrapper then and remove it from the parent form?
-
-Mobile view put editor and result in v-tab control so can swish back and forth while editing
-Standard view maybe top and bottom better?
-
-baseurl setting for local images:
-https://marked.js.org/#/USING_ADVANCED.md#options
-
-
 
 todo: event log type just for edit wiki?
   - this is because a wiki is not a discrete object in v8 so rights follow object itself and maybe it's necessary to know when wiki was edited?
@@ -201,7 +240,6 @@ todo: STYLE OUTPUT CSS
   - 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
   also maybe there's a cleaner way try a google search once you see how they did it
-
   - Tables currently look shitty, find a proper style for them with boxes and shit, maybe alternating background on rows etc
 
  */