renusify 2.3.1 → 2.4.0

package/components/codeEditor/highlightJs.vue

@@ -8,55 +8,44 @@
         spellcheck="false"
         @keydown="setTab"
     ></textarea>
-    <div class="text-preview" v-html="build"></div>
+    <div class="text-preview" v-html="code"></div>
   </div>
 </template>
 
 <script>
 import mixin from './mixin.js'
+import mixin_h from '../highlight/mixin.js'
 
 export default {
   name: "highlight-script",
   props: {
     modelValue: String,
   },
-  mixins: [mixin],
+  mixins: [mixin, mixin_h],
   data() {
     return {
       d: this.modelValue,
-      runnable: false,
       code: "",
     };
   },
+  async created() {
+    if (this.modelValue) {
+      await this.build_code()
+    }
+  },
   watch: {
     modelValue: function () {
       this.d = this.modelValue;
     },
-    d: function () {
+    d: async function () {
+      await this.build_code()
       this.$emit("update:modelValue", this.d);
     },
   },
-  computed: {
-    build() {
-      if (!this.d) {
-        return "";
-      }
-
-      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>')
-
-      return res;
-    },
+  methods: {
+    async build_code() {
+      this.code = await this.highlight(this.d, "js", true)
+    }
   }
 };
 </script>

package/components/codeEditor/index.vue

@@ -1,136 +1,137 @@
 <template>
-    <div :class="`${$r.prefix}code-editor`">
-        <div class="code-action text-right">
-            <r-btn
-                class="color-white-text"
-                icon
-                text
-                @click.prevent="$helper.copy($refs.codeView.innerText)"
-            >
-                <r-icon v-html="$r.icons.copy"></r-icon>
-            </r-btn>
-            <r-btn
-                class="color-white-text"
-                icon
-                text
-                @click.prevent="pretty"
-            >
-                P
-            </r-btn>
-            <r-btn v-if="show === 'code' && runnable" class="color-white-text" text @click.prevent="show = 'run'">
-                run
-                <r-icon v-html="$r.icons.play" exact></r-icon>
-            </r-btn>
-            <r-btn v-if="show === 'run'" class="color-white-text" text @click.prevent="show = 'code'">
-                <r-icon v-html="$r.icons.code_tags" exact></r-icon>
-            </r-btn>
-        </div>
-        <div v-if="show === 'run' && runnable" class="code-compile">
-            <r-code-editor-run
-                :id="id"
-                :script="scr"
-                :css="sty"
-                :template="temp"
-            ></r-code-editor-run>
-        </div>
-        <div v-show="show !== 'run'" ref="codeView" class="code-wrapper">
-            <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>
-        <span v-show="scriptShow" class="color-orange"
+  <div :class="`${$r.prefix}code-editor`">
+    <div class="code-action text-right">
+      <r-btn
+          class="color-white-text"
+          icon
+          text
+          @click.prevent="$helper.copy($refs.codeView.innerText)"
+      >
+        <r-icon v-html="$r.icons.copy"></r-icon>
+      </r-btn>
+      <r-btn
+          v-if="runnable"
+          class="color-white-text"
+          icon
+          text
+          @click.prevent="pretty"
+      >
+        P
+      </r-btn>
+      <r-btn v-if="show === 'code' && runnable" class="color-white-text" text @click.prevent="show = 'run'">
+        run
+        <r-icon exact v-html="$r.icons.play"></r-icon>
+      </r-btn>
+      <r-btn v-if="show === 'run'" class="color-white-text" text @click.prevent="show = 'code'">
+        <r-icon exact v-html="$r.icons.code_tags"></r-icon>
+      </r-btn>
+    </div>
+    <div v-if="show === 'run' && runnable" class="code-compile">
+      <r-code-editor-run
+          :id="id"
+          :css="sty"
+          :script="scr"
+          :template="temp"
+      ></r-code-editor-run>
+    </div>
+    <div v-show="show !== 'run'" ref="codeView" class="code-wrapper">
+      <div>
+        <span v-show="templateShow" class="highlight-syn-func">&lt;template&gt;</span>
+        <highlight-html ref="h-html" v-model="temp"></highlight-html>
+        <span v-show="templateShow" class="highlight-syn-func">&lt;/template&gt;</span>
+      </div>
+      <div>
+        <span v-show="scriptShow" class="highlight-syn-var"
         >&lt;script&gt;<br/>export default {</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>
-        <span v-show="cssShow" class="color-orange"
+        <highlight-script ref="h-js" v-model="scr"></highlight-script>
+        <span v-show="scriptShow" class="highlight-syn-var">}<br/>&lt;/script&gt;</span>
+      </div>
+      <div>
+        <span v-show="cssShow" class="highlight-syn-var"
         >&lt;style lang<span class="color-green">="css"</span>&gt;</span
         >
-                <highlight-css ref="h-css" v-model="sty"></highlight-css>
-              <span v-show="cssShow" class="color-orange">&lt;/style&gt;</span>
-            </div>
-        </div>
+        <highlight-css ref="h-css" v-model="sty"></highlight-css>
+        <span v-show="cssShow" class="highlight-syn-var">&lt;/style&gt;</span>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
 import {defineAsyncComponent} from 'vue'
 
 export default {
-    name: "r-code-editor",
-    components: {
-        HighlightCss: defineAsyncComponent(() =>
-            import("./highlightCss.vue")
-        ), HighlightScript: defineAsyncComponent(() =>
-          import("./highlightJs.vue")
-        ), highlightHtml: defineAsyncComponent(() =>
-          import("./highlightHtml.vue")
-        ), RCodeEditorRun: defineAsyncComponent(() =>
-          import("./run.vue")
-        )
+  name: "r-code-editor",
+  components: {
+    HighlightCss: defineAsyncComponent(() =>
+        import("./highlightCss.vue")
+    ), HighlightScript: defineAsyncComponent(() =>
+        import("./highlightJs.vue")
+    ), highlightHtml: defineAsyncComponent(() =>
+        import("./highlightHtml.vue")
+    ), RCodeEditorRun: defineAsyncComponent(() =>
+        import("./run.vue")
+    )
+  },
+  props: {
+    runnable: Boolean,
+    templateShow: {type: Boolean, default: true},
+    scriptShow: {type: Boolean, default: true},
+    cssShow: {type: Boolean, default: true},
+    template: String,
+    script: String,
+    css: String,
+  },
+  emits: ["update:template", "update:script", "update:css"],
+  data() {
+    return {
+      show: "code",
+      code: "",
+      edited: false,
+      temp: this.template,
+      scr: this.script,
+      sty: this.css,
+      id: this.$helper.uniqueId(),
+    };
+  },
+  created() {
+    if (!this.$r.icons.play) {
+      this.$r.icons.play =
+          '<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M8 5.14v14l11-7l-11-7Z"/></svg>';
+    }
+    if (!this.$r.icons.code_tags) {
+      this.$r.icons.code_tags =
+          '<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>';
+    }
+  },
+  watch: {
+    template: function (n) {
+      this.temp = n
     },
-    props: {
-        runnable: Boolean,
-        templateShow: {type: Boolean, default: true},
-        scriptShow: {type: Boolean, default: true},
-      cssShow: {type: Boolean, default: true},
-        template: String,
-        script: String,
-      css: String,
+    script: function (n) {
+      this.scr = n
     },
-  emits: ["update:template", "update:script", "update:css"],
-    data() {
-        return {
-            show: "code",
-            code: "",
-            edited: false,
-            temp: this.template,
-            scr: this.script,
-          sty: this.css,
-            id: this.$helper.uniqueId(),
-        };
+    css: function (n) {
+      this.sty = n
     },
-    created() {
-        if (!this.$r.icons.play) {
-            this.$r.icons.play =
-                '<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M8 5.14v14l11-7l-11-7Z"/></svg>';
-        }
-        if (!this.$r.icons.code_tags) {
-            this.$r.icons.code_tags =
-                '<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>';
-        }
+    temp: function () {
+      this.$emit("update:template", this.temp);
     },
-    watch: {
-        template: function (n) {
-            this.temp = n
-        },
-        script: function (n) {
-            this.scr = n
-        },
-      css: function (n) {
-            this.sty = n
-        },
-        temp: function () {
-            this.$emit("update:template", this.temp);
-        },
-        scr: function () {
-            this.$emit("update:script", this.scr);
-        },
-        sty: function () {
-          this.$emit("update:css", this.sty);
-        },
+    scr: function () {
+      this.$emit("update:script", this.scr);
     },
-    methods: {
-        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)
-        }
+    sty: function () {
+      this.$emit("update:css", this.sty);
     },
+  },
+  methods: {
+    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>
 
@@ -138,110 +139,118 @@ export default {
 @use "../../style/variables/base";
 
 .#{base.$prefix}code-editor {
-    position: relative;
-    white-space: break-spaces;
-    caret-color: white;
-    background-color: #15212e;
-    color: #fff;
+  position: relative;
+  white-space: break-spaces;
+  caret-color: white;
+  background-color: #15212e;
+  color: #fff;
+  padding: 10px;
+  font-size: 14px;
+
+  .code-script,
+  .code-template {
+    padding: 0 20px;
+  }
+
+  .code-wrapper {
+    direction: ltr;
+    text-align: left;
     padding: 10px;
-    font-size: 14px;
+  }
 
-    .code-script,
-    .code-template {
-        padding: 0 20px;
-    }
+  .code-compile {
+    background-color: #fafafa;
+    min-height: 300px;
+    padding: 10px;
+    margin: 0 -10px -10px -10px;
+    color: black;
+  }
 
-    .code-wrapper {
-        direction: ltr;
-        text-align: left;
-        padding: 10px;
-    }
 
-    .code-compile {
-        background-color: #fafafa;
-        min-height: 300px;
-        padding: 10px;
-        margin: 0 -10px -10px -10px;
-        color: black;
-    }
+  .highlight-syn-deleted,
+  .highlight-syn-err,
+  .highlight-syn-var {
+    color: #ff5261
+  }
 
-    .color-func {
-        color: #db92e3;
-    }
+  .highlight-syn-section,
+  .highlight-syn-kwd {
+    color: #ff7cc6
+  }
 
-    .color-func2 {
-        color: #deca10;
-    }
+  .highlight-syn-class {
+    color: #eab07c
+  }
 
-    .color-orange {
-        color: orange;
-    }
+  .highlight-numbers,
+  .highlight-syn-cmnt {
+    color: #7d828b
+  }
 
-    .color-green {
-        color: #0cde27;
-    }
+  .highlight-syn-insert,
+  .highlight-syn-type,
+  .highlight-syn-func,
+  .highlight-syn-bool {
+    color: #71d58a
+  }
 
-    .color-blue {
-        color: #3bb7ee;
-    }
+  .highlight-syn-num {
+    color: #b581fd
+  }
 
-    .color-number {
-        color: #7ad5ff;
-    }
+  .highlight-syn-oper {
+    color: #80c6ff
+  }
 
-    .color-purple {
-        color: #d2a8ee;
-    }
+  .highlight-syn-str {
+    color: #4dacfa
+  }
+
+  .code-editor-highlight {
+    position: relative;
+    margin: -12px 0;
 
-    .color-comment {
-        color: #898d8c;
+    .text-preview {
+      white-space: pre-wrap;
+      word-break: keep-all;
+      overflow-wrap: break-word;
+      min-height: 40px;
+      font-size: 14px;
+      letter-spacing: 2px;
+      line-height: 20px;
+      margin: 0;
+      border: 0;
+      padding: 12px;
     }
 
-    .code-editor-highlight {
-        position: relative;
-        margin: -12px 0;
-
-        .text-preview {
-            white-space: pre-wrap;
-            word-break: keep-all;
-            overflow-wrap: break-word;
-            min-height: 40px;
-            font-size: 14px;
-            letter-spacing: 2px;
-            line-height: 20px;
-            margin: 0;
-            border: 0;
-            padding: 12px;
-        }
-
-        textarea {
-            &::selection {
-                background-color: #fafafa;
-                -webkit-text-fill-color: #000;
-                color: #000;
-            }
-
-            padding: 12px;
-            margin: 0;
-            border: 0;
-            font-size: 14px;
-            letter-spacing: 2px;
-            line-height: 20px;
-            -webkit-font-smoothing: antialiased;
-            -webkit-text-fill-color: transparent;
-            outline: none;
-            width: 100%;
-            height: 100%;
-            min-height: 40px;
-            white-space: pre-wrap;
-            word-break: keep-all;
-            overflow-wrap: break-word;
-            position: absolute;
-            top: 0;
-            left: 0;
-            resize: none;
-            overflow: hidden;
-        }
+    textarea {
+      &::selection {
+        background-color: #fafafa;
+        -webkit-text-fill-color: #000;
+        color: #000;
+      }
+
+      padding: 12px;
+      margin: 0;
+      border: 0;
+      font-size: 14px;
+      letter-spacing: 2px;
+      line-height: 20px;
+      -webkit-font-smoothing: antialiased;
+      -webkit-text-fill-color: transparent;
+      outline: none;
+      width: 100%;
+      height: 100%;
+      min-height: 40px;
+      white-space: pre-wrap;
+      word-break: keep-all;
+      overflow-wrap: break-word;
+      position: absolute;
+      top: 0;
+      left: 0;
+      resize: none;
+      overflow: hidden;
     }
+  }
 }
 </style>

package/components/codeEditor/mixin.js

@@ -140,47 +140,6 @@ export default {
                 return false;
             }
             return true
-        },
-        re_quote(res) {
-            let regex = /"([^"]*)"/g;
-            res = res.replace(regex, '<span class="color-green code-editor-span">"$1"</span>');
-            regex = /'([^']*)'/g;
-            return res.replace(regex, "<span class=\"color-green code-editor-span\">'$1'</span>");
-        },
-        re_special(res, regex = /([{}\[\]])/g, color = "color-orange") {
-            return res.replace(regex, '<span class="' + color + ' code-editor-span">$1</span>')
-        },
-        re_number(res) {
-            return res.replace(/\b([0-9.]+)\b/g, '<span class="color-blue code-editor-span">$1</span>')
-        },
-        re_words(res, words) {
-            words.forEach((word) => {
-                res = res.replace(new RegExp("\\b(" + word + ")\\b", 'g'), '<span class="color-orange code-editor-span">$1</span>')
-            })
-
-            return res;
-        },
-        re_comment(res) {
-            //eslint-disable-next-line
-            let regex = /(\/\*[\s\S]*?\*\/|([^\\:]|^)\/\/.*)$/gm;
-            return res.replace(regex, '<span class="color-comment code-editor-span">$1</span>')
-        },
-        re_func(res) {
-            //function like Date()
-            let regex = /([$a-zA-Z-0-9_\s]+)(?=\()/g;
-            res = res.replace(regex, '<span class="color-func2 code-editor-span">$1</span>')
-
-            // Object keys
-            regex = /([a-zA-Z-0-9_]+)(?=:)/g;
-            res = res.replace(regex, '<span class="color-purple code-editor-span">$1</span>')
-
-
-            //function like $r $d()
-            regex = /(\$([a-zA-z0-9]*)[.(])/g;
-            res = res.replace(regex, '<span class="color-func code-editor-span">$1</span>')
-
-
-            return res;
-        },
+        }
     }
 }