Regex Memo: allow multiline input, fix versioning, fix css and class naming

CHANGELOG.md

@@ -3,13 +3,9 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## 1.8.1
+## Next
 - [fix] Fix bugs in Regex Memo textarea
-
-## 1.8.0
 - [feat] [REGEX memo](https://it-tools.tech/regex-memo)
-
-## 1.7.0
 - [feat] [Crontab friendly generator](https://it-tools.tech/crontab-generator)
 
 ## 1.6.0

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "it-tools",
-  "version": "1.8.1",
+  "version": "1.6.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "it-tools",
   "description": "",
-  "version": "1.8.1",
+  "version": "1.6.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

src/components/StyledTextarea.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="StyledTextarea" @input="updateInput(true)" contenteditable></div>
+  <div class="styled-textarea" @input="updateInput(true)" contenteditable></div>
 </template>
 
 <script>
@@ -23,7 +23,6 @@ export default {
 
       if(area.innerText) {
         let pos = this.getPos();
-        console.log(pos);
 
         /* Update innerHTML with formatting */
         let html = this.fn(area.innerText);
@@ -66,12 +65,14 @@ export default {
 </script>
 
 <style lang="less">
-  .StyledTextarea {
-    overflow:scroll;
+  .styled-textarea {
+    overflow:auto;
     height:100px;
     width:100%;
     border:solid;
     border-width:1px;
     resize: vertical;
+    white-space: pre-wrap;
+    display: inline-block;
   }
 </style>

src/routes/tools/RegexMemo.vue

@@ -1,7 +1,7 @@
 <template>
     <v-row >
       <v-col cols="12" xl="6" lg="6" md="4" sm="12">
-        <v-card class="single-card" id="REGEX_Tester">
+        <v-card class="single-card" id="regex-tester">
             <v-card-title>REGEX Tester</v-card-title>
             <v-card-text>
                 <v-text-field
@@ -16,7 +16,7 @@
         </v-card>
       </v-col>
       <v-col cols="12" xl="6" lg="6" md="8" sm="12">
-        <v-card class="single-card" id="REGEX_Memo">
+        <v-card class="single-card" id="regex-memo">
             <v-card-title>REGEX Memo</v-card-title>
             <table>
               <tr><th>Character Classes</th></tr>
@@ -148,9 +148,12 @@
 </script>
 
 <style lang="less">
+  #regex-memo {
+    padding: 0px 16px 16px 16px;
+  }
   table {
     width: 100%;
-    margin-left: 10%;
+    table-layout: fixed;
   }
   th {
     padding-top: 15px;