Fix bugs in Regex Memo textarea

CHANGELOG.md

@@ -3,6 +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
+- [fix] Fix bugs in Regex Memo textarea
+
 ## 1.8.0
 - [feat] [REGEX memo](https://it-tools.tech/regex-memo)
 

package-lock.json

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

package.json

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

src/components/StyledTextarea.vue

@@ -16,19 +16,50 @@ export default {
   },
   methods: {
     updateInput (moveCursor) {
-      if(this.$el.innerText){
+      let area = this.$el;
-        this.$emit('input', this.$el.innerText);
 
-        let html = this.fn(this.$el.innerText);
+      /* Emit innerText */
-        this.$el.innerHTML = html;
+      this.$emit('input', area.innerText);
+
+      if(area.innerText) {
+        let pos = this.getPos();
+        console.log(pos);
+
+        /* Update innerHTML with formatting */
+        let html = this.fn(area.innerText);
+        area.innerHTML = html;
 
         if(moveCursor){
-          /* Move cursor to end of selection */
+          this.setPos(pos);
-          this.$el.focus();
-          document.execCommand('selectAll', false, null);
-          document.getSelection().collapseToEnd();
         }
       }
+    },
+    getPos () {
+      let _range = document.getSelection().getRangeAt(0);
+      let range = _range.cloneRange();
+      range.selectNodeContents(this.$el);
+      range.setEnd(_range.endContainer, _range.endOffset);
+      return range.toString().length;
+    },
+    setPos (pos) {
+      /* find childnode which will contain the cursor. */
+      let node = null;
+      for(let n of this.$el.childNodes) {
+        let length = n.firstChild ? n.firstChild.length : n.length;
+        if(length >= pos) {
+          node = n.firstChild ?? n;
+          break;
+        } else {
+          pos -= length;
+        }
+      }
+      /* Set cursor at right position on right node */
+      let rangeObj = document.createRange();
+      let selectObj = window.getSelection();
+      rangeObj.setStart(node, pos);
+      rangeObj.collapse(true);
+      selectObj.removeAllRanges();
+      selectObj.addRange(rangeObj);
     }
   }
 }

src/routes/tools/RegexMemo.vue

@@ -102,97 +102,7 @@
         data() {
             return {
                 inputRegex: '',
-                inputText: '',
+                inputText: ''
-                tips: [
-                {
-                    section: 'Character Classes',
-                    child: [
-                        {
-                            text: 'Any character except newline',
-                            code: '.'
-                        },
-                        {
-                            text: 'Word, digit, whitespace',
-                            code: '\\w \\d \\s'
-                        },
-                        {
-                            text: 'Not word, digit, whitespace',
-                            code: '\\W \\D \\S'
-                        },
-                        {
-                            text: 'Any of a, b, or c',
-                            code: '[abc]'
-                        },
-                        {
-                            text: 'Not a, b, or c',
-                            code: '[^abc]'
-                        },
-                        {
-                            text: 'Character between a & f',
-                            code: '[a-f]'
-                        }
-                    ]
-                },
-                {
-                    section: 'Anchors',
-                    child: [
-                        {
-                            text: '^ is the start of the string, $ end of string',
-                            code: '^abc$'
-                        },
-                        {
-                            text: 'Word, not word boundary',
-                            code: '\\b \\B'
-                        }
-                    ]
-                },
-                {
-                    section: 'I\'ve made a mistake',
-                    child: [
-                        {
-                            text: 'Change last commit message',
-                            code: 'git commit --amend'
-                        },
-                        {
-                            text: 'Undo most recent commit and keep changes',
-                            code: 'git reset HEAD~1'
-                        },
-                    ]
-                },
-                {
-                    section: 'Setup SSH',
-                    child: [
-                        [
-                            {
-                                text: '1). Generate an SSH key.',
-                                code: 'ssh-keygen -t rsa -b 4096 -C "[email]"'
-                            },
-                            {
-                                text: '2). Start the ssh-agent in the background.',
-                                code: 'eval "$(ssh-agent -s)"'
-                            },
-
-                        ]
-                    ]
-                },
-                {
-                    section: 'Merge and rebase',
-                    child: [
-                        {
-                            text: 'Merge a branch into the current',
-                            code: 'git merge [branch]'
-                        },
-                        {
-                            text: 'Abort merge (conflicts)',
-                            code: 'git merge --abort'
-                        },
-                        {
-                            text: 'Continue merge after resolving conflicts',
-                            code: 'git merge --continue'
-                        },
-                    ]
-                },
-            ]
             }
         },
         methods: {