renusify 1.4.2 → 1.4.4

package/components/codeEditor/highlightHtml.vue

@@ -6,18 +6,21 @@
         autocomplete="off"
         autocorrect="off"
         spellcheck="false"
-        @keydown="setTab"
+        @keydown="setKey"
     ></textarea>
     <div class="text-preview" v-html="build"></div>
   </div>
 </template>
 
 <script>
+import mixin from './mixin'
+
 export default {
   name: "highlight-html",
   props: {
     modelValue: String,
   },
+  mixins: [mixin],
   data() {
     return {
       d: this.modelValue,
@@ -42,56 +45,25 @@ export default {
       let data = this.d;
       data = this.$helper.replacer(data, "<", "&lt;");
       data = this.$helper.replacer(data, ">", "&gt;");
-      data = data.split("");
-      let res = "";
-      let in_quta = false;
-      data.forEach((c) => {
-        if (c === "=") {
-          res += '<span class="color-blue">=</span>';
-        } else if ((c === '"' || c === "'") && !in_quta) {
-          in_quta = c;
-          res += '<span class="color-green">' + c;
-        } else if (c === in_quta) {
-          in_quta = false;
-          res += c + "</span>";
-        } else {
-          res += c;
-        }
-      });
-
-      res = this.$helper.replacer(
-          res,
-          "&lt;",
-          '<span class="color-orange code-editor-span">&lt;'
-      );
-      res = this.$helper.replacer(res, "&gt;", "&gt;</span>");
-      res = this.$helper.replacer(
-          res,
-          "{{",
-          '<span class="color-blue code-editor-span">{{'
-      );
-      res = this.$helper.replacer(res, "}}", "}}</span>");
+      let res = data;
+      res = this.re_quote(res)
 
-      let regex = /\+(.*?)\+/g;
-      let matched = res.matchAll(regex);
-      for (const match of matched) {
-        res = this.$helper.replacer(
-            res,
-            match[0],
-            '<span class="color-blue code-editor-span">' + match[0] + "</span>"
-        );
-      }
-      res = this.re_words(res);
       res = this.re_comment(res);
       res = this.re_func(res);
+
+      res = res.replace(/(&lt;+[\s\S]+&gt;)/g, '<span class="color-orange code-editor-span">$1</span>')
+      res = res.replace(/\{\{([^}]+)}}/g, '<span class="color-blue code-editor-span">{{$1}}</span>')
       return res;
     },
   },
   methods: {
-    setTab(event) {
+    setKey(event) {
       if (event.key === "<") {
         this.openTag = event.target.selectionEnd
         return false
+      } else if (event.key === "/" && this.openTag !== null && this.openTag + 1 === event.target.selectionEnd) {
+        this.openTag = null
+        return false
       } else if (event.key === ">" && this.openTag !== null) {
         const end = event.target.selectionEnd;
         const sel = event.target.value.substring(this.openTag + 1, end).trim().split(' ')[0];
@@ -102,130 +74,19 @@ export default {
         this.openTag = null
         return false
       }
-
-      if (event.key === "'" || event.key === '"' || event.key === '`') {
+      if (event.key === "=") {
         const end = event.target.selectionEnd;
         event.preventDefault()
-        document.execCommand('insertText', false, event.key.repeat(2));
-        event.target.selectionEnd = end + 1;
+        document.execCommand('insertText', false, '=""');
+        event.target.selectionEnd = end + 2;
         return false;
       }
-      if (event.key === "{") {
-        const end = event.target.selectionEnd;
-        event.preventDefault()
-        document.execCommand('insertText', false, '{}');
-        event.target.selectionEnd = end + 1;
-        return false;
-      }
-      if (event.key === "(") {
-        const end = event.target.selectionEnd;
-        event.preventDefault()
-        document.execCommand('insertText', false, '()');
-        event.target.selectionEnd = end + 1;
-        return false;
-      }
-      if (event.key === "[") {
-        const end = event.target.selectionEnd;
-        event.preventDefault()
-        document.execCommand('insertText', false, '[]');
-        event.target.selectionEnd = end + 1;
-        return false;
-      }
-      if (event.keyCode === 9) {
-        event.preventDefault()
-        document.execCommand('insertText', false, ' '.repeat(4));
-        return false;
-      }
-      if (event.keyCode === 13) {
-        event.preventDefault()
-        let n = event.target.value.substr(0, event.target.selectionStart).split('\n')
-        n = n[n.length - 1].split('')
-        let w = ''
-        for (let i = 0; i < n.length; i++) {
-          if (n[i] === ' ') {
-            w += ' '
-          } else {
-            break
-          }
-        }
-
-        document.execCommand('insertText', false, '\n' + w);
-        return false;
-      }
-      return true
-    },
-    re_words(res) {
-      res = this.$helper.replacer(
-          res,
-          " window.",
-          ' <span class="color-orange code-editor-span">window</span>.'
-      );
-      res = this.$helper.replacer(
-          res,
-          " new ",
-          ' <span class="color-orange code-editor-span">new</span> '
-      );
-      res = this.$helper.replacer(
-          res,
-          " true",
-          ' <span class="color-orange code-editor-span">true</span>'
-      );
-      res = this.$helper.replacer(
-          res,
-          " false",
-          ' <span class="color-orange code-editor-span">false</span>'
-      );
-
-      return res;
+      return this.setTab(event)
     },
     re_comment(res) {
-      let regex = /&lt;!--(.*?)--&gt;/g;
-      let matched = res.matchAll(regex);
-      for (const match of matched) {
-        res = this.$helper.replacer(
-            res,
-            match[0],
-            '<span class="color-comment code-editor-span">' + match[0] + "</span>"
-        );
-      }
-      return res;
-    },
-    re_func(res) {
-      //function like Date()
-      let regex = /([a-zA-Z_{1}][a-zA-Z0-9_]+)[ ]{0,1}(?=\()/g;
-      let matched = res.matchAll(regex);
-      for (const match of matched) {
-        res = this.$helper.replacer(
-            res,
-            match[0],
-            '<span class="color-func2 code-editor-span">' + match[0] + "</span>"
-        );
-      }
-
-      //function like $r $d()
-      regex = /(\$([a-zA-z0-9]*)[.|(])/g;
-      matched = res.matchAll(regex);
-      for (const match of matched) {
-        res = this.$helper.replacer(
-            res,
-            match[0].substr(0, match[0].length - 1),
-            '<span class="color-func code-editor-span">' +
-            match[0].substr(0, match[0].length - 1) +
-            "</span>"
-        );
-      }
-      res = this.$helper.replacer(
-          res,
-          "(",
-          '<span class="color-func2 code-editor-span">(</span>'
-      );
-      res = this.$helper.replacer(
-          res,
-          ")",
-          '<span class="color-func2 code-editor-span">)</span>'
-      );
-      return res;
-    },
+      let regex = /(&lt;!--+[\s\S]+--&gt;)/g;
+      return res.replace(regex, '<span class="color-comment code-editor-span">$1</span>')
+    }
   },
 };
 </script>

package/components/codeEditor/highlightJs.vue

@@ -13,11 +13,14 @@
 </template>
 
 <script>
+import mixin from './mixin'
+
 export default {
   name: "highlight-script",
   props: {
     modelValue: String,
   },
+  mixins: [mixin],
   data() {
     return {
       d: this.modelValue,
@@ -38,255 +41,23 @@ export default {
       if (!this.d) {
         return "";
       }
-      let data = this.d.split("");
-      let str = this.d.trim();
-
-      if (str.substr(0, 1) === "{") {
-        str = str.substr(1, str.length - 2);
-      }
-      let res = "";
-
-      let in_quta = false;
-      data.forEach((c) => {
-        if (["=", "&", "{", "}", "<", ">"].includes(c)) {
-          res += '<span class="color-blue code-editor-span">' + c + "</span>";
-        } else if ([",", ";", ":"].includes(c)) {
-          res += '<span class="color-orange code-editor-span">' + c + "</span>";
-        } else if (parseInt(c) > -1) {
-          res += '<span class="color-number code-editor-span">' + c + "</span>";
-        } else if ((c === '"' || c === "'" || c === "`") && !in_quta) {
-          in_quta = c;
-          res += '<span class="color-green code-editor-span">' + c;
-        } else if (c === in_quta) {
-          in_quta = false;
-          res += c + "</span>";
-        } else {
-          res += c;
-        }
-      });
 
-      res = this.re_words(res);
+      let res = this.d;
+      res = this.$helper.replacer(res, "<", "&lt;");
+      res = this.$helper.replacer(res, ">", "&gt;");
+      res = this.re_quote(res);
+      res = this.re_special(res, /([{}\[\]])/g);
+      res = this.re_words(res, ['import', 'from', 'delete', 'window', 'new', 'var', 'let', 'const', 'return', 'true', 'false', 'this', 'null', 'String', 'Boolean', 'Object']);
       res = this.re_comment(res);
       res = this.re_func(res);
+      res = this.re_number(res);
+      res = this.re_special(res, /([(),])/g, 'color-func2');
+      res = res.replace(/(&lt;)/g, '<span class="color-orange code-editor-span">$1</span>')
+      res = res.replace(/(&gt;)/g, '<span class="color-orange code-editor-span">$1</span>')
 
-      // main function vuejs methods created ,...
-      this.strToObj(str).forEach((item) => {
-        if (item) {
-          res = this.$helper.replacer(
-              res,
-              item,
-              '<span class="color-func code-editor-span">' + item + "</span>"
-          );
-        }
-      });
-
-      return res;
-    },
-  },
-  methods: {
-    setTab(event) {
-      if (event.key === "'" || event.key === '"' || event.key === '`') {
-        const end = event.target.selectionEnd;
-        event.preventDefault()
-        document.execCommand('insertText', false, event.key.repeat(2));
-        event.target.selectionEnd = end + 1;
-        return false;
-      }
-      if (event.key === "{") {
-        const end = event.target.selectionEnd;
-        event.preventDefault()
-        document.execCommand('insertText', false, '{}');
-        event.target.selectionEnd = end + 1;
-        return false;
-      }
-      if (event.key === "(") {
-        const end = event.target.selectionEnd;
-        event.preventDefault()
-        document.execCommand('insertText', false, '()');
-        event.target.selectionEnd = end + 1;
-        return false;
-      }
-      if (event.key === "[") {
-        const end = event.target.selectionEnd;
-        event.preventDefault()
-        document.execCommand('insertText', false, '[]');
-        event.target.selectionEnd = end + 1;
-        return false;
-      }
-      if (event.keyCode === 9) {
-        event.preventDefault()
-        document.execCommand('insertText', false, ' '.repeat(4));
-        return false;
-      }
-      if (event.keyCode === 13) {
-        event.preventDefault()
-        let n = event.target.value.substr(0, event.target.selectionStart).split('\n')
-        n = n[n.length - 1].split('')
-        let w = ''
-        for (let i = 0; i < n.length; i++) {
-          if (n[i] === ' ') {
-            w += ' '
-          } else {
-            break
-          }
-        }
-
-        document.execCommand('insertText', false, '\n' + w);
-        return false;
-      }
-      return true
-    },
-    strToObj(str) {
-      str = this.$helper.replacer(str, " ", "");
-      str = this.$helper.replacer(str, "\n", "");
-      str = this.$helper.replacer(str, "\r", "");
-      let open = 0;
-      let pre = 0;
-      let to = 0;
-      let items = [];
-      const s = str;
-      s.split("").forEach((c, i) => {
-        to++;
-        if (c === "{") {
-          open++;
-        }
-        if (c === "}") {
-          open--;
-        }
-        if (open === 0 && c === ",") {
-          let new_str = str.substr(pre, to - 1);
-          const o = new_str.indexOf(":");
-          const f = new_str.indexOf("(");
-          if ((f > 0 && f < o) || o < 0) {
-            new_str = new_str.substr(0, f);
-          } else {
-            new_str = new_str.substr(0, o);
-          }
-          items.push(new_str);
-          pre = i + 1;
-          to = 0;
-        }
-      });
-      let new_str = str.substr(pre, str.length);
-      const o = new_str.indexOf(":");
-      const f = new_str.indexOf("(");
-      if ((f > 0 && f < o) || o < 0) {
-        new_str = new_str.substr(0, f);
-      } else {
-        new_str = new_str.substr(0, o);
-      }
-      items.push(new_str);
-      return items;
-    },
-    re_words(res) {
-      res = this.$helper.replacer(
-          res,
-          "import ",
-          '<span class="color-orange code-editor-span">import</span> '
-      );
-      res = this.$helper.replacer(
-          res,
-          " from ",
-          ' <span class="color-orange code-editor-span">from</span> '
-      );
-      res = this.$helper.replacer(
-          res,
-          " window.",
-          ' <span class="color-orange code-editor-span">window</span>.'
-      );
-      res = this.$helper.replacer(
-          res,
-          " new ",
-          ' <span class="color-orange code-editor-span">new</span> '
-      );
-      res = this.$helper.replacer(
-          res,
-          " var ",
-          ' <span class="color-orange code-editor-span">var</span> '
-      );
-      res = this.$helper.replacer(
-          res,
-          " let ",
-          ' <span class="color-orange code-editor-span">let</span> '
-      );
-      res = this.$helper.replacer(
-          res,
-          " const ",
-          ' <span class="color-orange code-editor-span">const</span> '
-      );
-      res = this.$helper.replacer(
-          res,
-          " return ",
-          ' <span class="color-orange code-editor-span">return</span> '
-      );
-      res = this.$helper.replacer(
-          res,
-          " true",
-          ' <span class="color-orange code-editor-span">true</span>'
-      );
-      res = this.$helper.replacer(
-          res,
-          " false",
-          ' <span class="color-orange code-editor-span">false</span>'
-      );
-      res = this.$helper.replacer(
-          res,
-          " this.",
-          ' <span class="color-orange code-editor-span">this</span>.'
-      );
-
-      return res;
-    },
-    re_comment(res) {
-      //eslint-disable-next-line
-      let regex = /(\/\*[\w\'\s\r\n\*]*\*\/)|(\/\/[\w\s\']*)/g;
-      let matched = res.matchAll(regex);
-      for (const match of matched) {
-        res = this.$helper.replacer(
-            res,
-            match[0],
-            '<span class="color-comment code-editor-span">' + match[0] + "</span>"
-        );
-      }
       return res;
     },
-    re_func(res) {
-      //function like Date()
-      let regex = /([a-zA-Z_{1}][a-zA-Z0-9_]+)[ ]{0,1}(?=\()/g;
-      let matched = res.matchAll(regex);
-      for (const match of matched) {
-        res = this.$helper.replacer(
-            res,
-            match[0],
-            '<span class="color-func2 code-editor-span">' + match[0] + "</span>"
-        );
-      }
-
-      //function like $r $d()
-      regex = /(\$([a-zA-z0-9]*)[.|(])/g;
-      matched = res.matchAll(regex);
-      for (const match of matched) {
-        res = this.$helper.replacer(
-            res,
-            match[0].substr(0, match[0].length - 1),
-            '<span class="color-func code-editor-span">' +
-            match[0].substr(0, match[0].length - 1) +
-            "</span>"
-        );
-      }
-      res = this.$helper.replacer(
-          res,
-          "(",
-          '<span class="color-func2 code-editor-span">(</span>'
-      );
-      res = this.$helper.replacer(
-          res,
-          ")",
-          '<span class="color-func2 code-editor-span">)</span>'
-      );
-      return res;
-    },
-  },
+  }
 };
 </script>
 

package/components/codeEditor/index.vue

@@ -9,6 +9,14 @@
       >
         <r-icon v-html="$r.icons.copy"></r-icon>
       </r-btn>
+      <r-btn
+          class="image-copy"
+          icon
+          text
+          @click.prevent="pretty"
+      >
+        P
+      </r-btn>
       <r-btn v-if="show === 'code' && runnable" text @click="show = 'run'">
         run
         <r-icon v-html="$r.icons.play" exact></r-icon>
@@ -17,37 +25,33 @@
         <r-icon v-html="$r.icons.code_tags" exact></r-icon>
       </r-btn>
     </div>
-    <div v-show="false" ref="codeSlot">
-      <slot></slot>
-    </div>
     <div v-if="show === 'run' && runnable" class="code-compile">
       <r-code-editor-run
           :id="id"
-          :script="script"
-          :style="style"
-          :template="template"
+          :script="scr"
+          :style="sty"
+          :template="temp"
       ></r-code-editor-run>
     </div>
     <div v-show="show !== 'run'" ref="codeView" class="code-wrapper">
-      <div v-show="templateShow">
-        <span class="color-green">&lt;template&gt;</span>
-        <highlight-html v-model="temp"></highlight-html>
-        <span class="color-green">&lt;/template&gt;</span>
-        <br/>
+      <div>
+        <span v-show="templateShow" class="color-green">&lt;template&gt;</span>
+        <highlight-html ref="h-html" v-model="temp"></highlight-html>
+        <span v-show="templateShow" class="color-green">&lt;/template&gt;</span>
       </div>
-      <div v-show="scriptShow">
-        <span class="color-orange"
+      <div>
+        <span v-show="scriptShow" class="color-orange"
         >&lt;script&gt;<br/>export default {</span
         >
-        <highlight-script v-model="scr"></highlight-script>
-        <span class="color-orange">}<br/>&lt;script&gt;</span>
+        <highlight-script ref="h-js" v-model="scr"></highlight-script>
+        <span v-show="scriptShow" class="color-orange">}<br/>&lt;script&gt;</span>
       </div>
-      <div v-show="styleShow">
-        <span class="color-orange"
+      <div>
+        <span v-show="styleShow" class="color-orange"
         >&lt;style lang<span class="color-green">="css"</span>&gt;</span
         >
-        <highlight-css v-model="sty"></highlight-css>
-        <span class="color-orange">&lt;style&gt;</span>
+        <highlight-css ref="h-css" v-model="sty"></highlight-css>
+        <span v-show="styleShow" class="color-orange">&lt;style&gt;</span>
       </div>
     </div>
   </div>
@@ -93,10 +97,16 @@ export default {
           '<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="m14.6 16.6l4.6-4.6l-4.6-4.6L16 6l6 6l-6 6l-1.4-1.4m-5.2 0L4.8 12l4.6-4.6L8 6l-6 6l6 6l1.4-1.4Z"/></svg>';
     }
   },
-  mounted() {
-    this.get_code("codeSlot");
-  },
   watch: {
+    template: function (n) {
+      this.temp = n
+    },
+    script: function (n) {
+      this.scr = n
+    },
+    style: function (n) {
+      this.sty = n
+    },
     temp: function () {
       this.$emit("update:template", this.temp);
     },
@@ -108,41 +118,11 @@ export default {
     },
   },
   methods: {
-    toHTML(htmlString) {
-      let div = document.createElement("div");
-      div.innerHTML = htmlString;
-      return div;
-    },
-    get_code(slot = "codeSlot") {
-      if (!this.$refs[slot]) {
-        setTimeout(() => {
-          this.get_code(slot);
-        }, 100);
-        return;
-      }
-
-      this.code = this.toHTML(this.$refs[slot].innerHTML);
-      let temp = this.code.querySelector(".code-template");
-
-      if (temp && temp.childNodes.length > 0) {
-        for (let i = 0; i < temp.childNodes.length; i++) {
-          if (temp.childNodes[i].nodeName === "#comment") {
-            this.template = this.toHTML(temp.childNodes[i].nodeValue).innerHTML;
-            break;
-          }
-        }
-      }
-
-      let script = this.code.querySelector(".code-script");
-      if (script && script.childNodes.length > 0) {
-        for (let i = 0; i < script.childNodes.length; i++) {
-          if (script.childNodes[i].nodeName === "#comment") {
-            this.script = script.childNodes[i].nodeValue;
-            break;
-          }
-        }
-      }
-    },
+    pretty() {
+      this.temp = this.$refs["h-html"].pretty_html(this.temp)
+      this.scr = this.$refs["h-js"].pretty_js(this.scr)
+      this.sty = this.$refs["h-css"].pretty_js(this.sty)
+    }
   },
 };
 </script>