experiments

All kinds of coding experiments
Log | Files | Refs | Submodules

App.vue (1905B)

      1 <template>
      2     <div>
      3         <button @click="viewing = !viewing">{{ viewing ? "Edit" : "View" }}</button>
      4         <span v-show="!viewing">
      5             <button @click="addBold"><b>b</b></button>
      6             <button @click="addItalics"><i>i</i></button>
      7             ...more tools here
      8         </span>
      9         <hr>
     10         <textarea v-if="!viewing" v-model="adocSource" ref="ta"></textarea> 
     11         <Viewer v-else :adocSource="adocSource"/>
     12     </div>
     13 </template>
     14 
     15 
     16 <script>
     17     import Viewer from "./Viewer.vue";
     18     export default {
     19         name: "App",
     20         components: {Viewer},
     21         data() {
     22             return {
     23                 adocSource: "",
     24                 adocRendered: "",
     25                 viewing: false
     26             }
     27         },
     28         methods: {
     29             addBold() {
     30                 this.wrapSelection("*");
     31             },
     32             addItalics() {
     33                 this.wrapSelection("_");
     34             },
     35             /**
     36              * wrap text between start and end index in the given symbol
     37              */
     38             wrapSelection(symbol) {
     39                 let selStart = this.$refs.ta.selectionStart-1;
     40                 let selEnd = this.$refs.ta.selectionEnd-1;
     41                 if (selStart === this.adocSource.length-1) {
     42                     this.adocSource += symbol + symbol;
     43                     // TODO: Set selectionStart between the two stars
     44                     return;
     45                 }
     46                 let pre = this.adocSource.substr(0, selStart+1);
     47                 let selected = this.adocSource.substr(selStart+1, selEnd-selStart)
     48                 let post = this.adocSource.substr(selEnd+1);
     49                 this.adocSource = pre + symbol + selected + symbol + post;
     50             }
     51         }
     52     }
     53 </script>
     54 
     55 <style scoped>
     56     textarea {
     57         width: 100%;
     58         height: 100%;
     59         display: block;
     60         border: 0;
     61         /*outline: none;*/
     62     }
     63 </style>