优化code组件黑暗模式;优化markd换行;更新meditor适配新版markd

src/code/colorful.js

@@ -19,8 +19,9 @@ const FN = /([\.\s])([a-zA-Z$][\da-zA-Z_]*)(\(.*?\))/g
 const CM = /(?=\s)([ ]*\/\/.*)|(^\/\/.*)/g
 const INLINE = {
   code: /`([^`]*?[^`\\\s])`/g,
+  codeBlock: /^```(.*?)$/gm,
   strong: [/__([\s\S]*?[^\s\\])__(?!_)/g, /\*\*([\s\S]*?[^\s\\])\*\*(?!\*)/g],
-  em: [/_([\s\S]*?[^\s\\])_(?!_)/g, /\*([\s\S]*?[^\s\\*])\*(?!\*)/g],
+  em: [/_([\s\S]*?[^\s\\_])_(?!_)/g, /\*([\s\S]*?[^\s\\*])\*(?!\*)/g],
   del: /~~([\s\S]*?[^\s\\~])~~/g,
   qlinkVar: /^\[(\d+)\]: ([\S]+)\s*?((['"])[\s\S]*?\4)?\s*?$/gm, // 引用声明
   qlink: /\[([^\]]*?)\]\[(\d*?)\]/g, // 引用链接
@@ -29,7 +30,8 @@ const INLINE = {
   head: /^(#{1,6} )(.*)$/gm,
   quote: /^(>{1,} )(.*)$/gm,
   task: /^([\-\+\*]) \[( |x)\] (.*)$/gm,
-  list: /^([ \t]*?([\-\+\*]|\d+\.) )(.*)$/gm
+  list: /^([ \t]*?([\-\+\*]|\d+\.) )(.*)$/gm,
+  br: /^([\-\*_=]{3})(.*?)$/gm
 }
 
 function parseJs(code) {
@@ -62,12 +64,15 @@ function rebuild(code) {
 export function colorMd(code) {
   code = code
     .replace(INLINE.head, '[cm]$1[/cm][tag]<strong>$2</strong>[/tag]')
+    .replace(INLINE.br, '[cm]$1[/cm][tag]$2[/tag]')
     .replace(INLINE.quote, '[cm]$1[/cm]<em>$2</em>')
     .replace(
       INLINE.task,
       '[cm]$1 [[/cm][attr]$2[/attr][cm]][/cm] <strong>$3</strong>'
     )
     .replace(INLINE.list, '[cm]$1[/cm]<strong>$3</strong>')
+    .replace(INLINE.code, '[cm]`[/cm][tag]$1[/tag][cm]`[/cm]')
+    .replace(INLINE.codeBlock, '[cm]```[/cm][tag]$1[/tag]')
     .replace(INLINE.strong[0], '[cm]__[/cm]<strong>$1</strong>[cm]__[/cm]')
     .replace(INLINE.strong[1], '[cm]**[/cm]<strong>$1</strong>[cm]**[/cm]')
     .replace(INLINE.em[0], '[cm]_[/cm]<em>$1</em>[cm]_[/cm]')

src/code/index.wc

@@ -8,7 +8,7 @@
         <wc-icon title="复制" class="act cp" is="doc"></wc-icon>
       </section>
     </header>
-    <wc-scroll axis="y" class="scoll"></wc-scroll>
+    <wc-scroll axis="y" class="scroll"></wc-scroll>
   </div>
 </template>
 
@@ -77,7 +77,7 @@
     }
   }
 
-  .scoll {
+  .scroll {
     flex: 1;
     padding: 5px 0 0;
     line-height: 20px;
@@ -163,10 +163,10 @@
     background: var(--color-dark-1);
     color: var(--color-plain-3);
 
-    .code {
+    .scroll {
       color: var(--color-plain-2);
 
-      p::before {
+      code::before {
         color: var(--color-grey-3);
       }
     }

src/markd/core.js

@@ -177,7 +177,7 @@ function fixed(str) {
     })
     .replace(BLOCK_RE, (m, tag, attr, txt) => {
       return `<${tag + attr.replace(/(⨨☇)+/g, ' ')}>${txt
-        .replace(/⨨⤶/g, ' ')
+        .replace(/⨨⤶/g, '\n')
         .replace(/(⨨☇)+/g, ' ')}</${tag}>`
     })
 }
@@ -212,17 +212,6 @@ class Tool {
             list.push(tmp.replace(/^```([\w\#\-]*?)$/, '<wc-code lang="$1">'))
           }
           isCodeBlock = !isCodeBlock
-        } else if (Helper.isTable(tmp) && !isTable) {
-          var thead = tmp.split('|')
-          // 去头去尾
-          thead.shift()
-          thead.pop()
-          list.push(
-            `<table><thead><tr>${thead
-              .map(_ => `<th>${_}</th>`)
-              .join('')}</tr></thead><tbody>`
-          )
-          isTable = true
         } else {
           var qlink
           if (isCodeBlock) {
@@ -231,22 +220,38 @@ class Tool {
               .replace(/>/g, '&gt;')
               .replace('\\`\\`\\`', '```')
           } else {
-            it = it
+            if (Helper.isTable(tmp) && !isTable) {
-              // 非代码块进行xss过滤
+              var thead = tmp.split('|')
-              .replace(INLINE.code, (m, txt) => {
+              // 去头去尾
-                return `\`${txt.replace(/</g, '&lt;').replace(/>/g, '&gt;')}\``
+              thead.shift()
-              })
+              thead.pop()
-              .replace(/<(\/?)script[^>]*?>/g, '&lt;$1script&gt;')
+              list.push(
-              .replace(TAG_RE, (m, name, attr = '') => {
+                `<table><thead><tr>${thead
-                // 过滤所有onXX=""事件属性
+                  .map(_ => `<th>${_}</th>`)
-                attr = attr.replace(ATTR_RE, ' ').trim()
+                  .join('')}</tr></thead><tbody>`
-                if (attr) {
+              )
-                  attr = ' ' + attr
+              isTable = true
-                }
+              continue
-                return `<${name}${attr}>`
+            } else {
-              })
+              it = it
-            // 不在代码块中, 才判断引用声明
+                // 非代码块进行xss过滤
-            qlink = Helper.isQLink(it)
+                .replace(INLINE.code, (m, txt) => {
+                  return `\`${txt
+                    .replace(/</g, '&lt;')
+                    .replace(/>/g, '&gt;')}\``
+                })
+                .replace(/<(\/?)script[^>]*?>/g, '&lt;$1script&gt;')
+                .replace(TAG_RE, (m, name, attr = '') => {
+                  // 过滤所有onXX=""事件属性
+                  attr = attr.replace(ATTR_RE, ' ').trim()
+                  if (attr) {
+                    attr = ' ' + attr
+                  }
+                  return `<${name}${attr}>`
+                })
+              // 不在代码块中, 才判断引用声明
+              qlink = Helper.isQLink(it)
+            }
           }
 
           if (qlink) {
@@ -300,7 +305,7 @@ class Tool {
         }
 
         if (isTable) {
-          var tmp = it.split('|').map(_ => _.trim())
+          let tmp = it.split('|').map(_ => _.trim())
           tmp.shift()
           tmp.pop()
 
@@ -327,8 +332,9 @@ class Tool {
           continue
         }
 
-        // wc-code标签直接拼接
+        // wc-code标签直接拼接, 判断时多拼一个 < 和 >,
-        if (~it.indexOf('wc-code')) {
+        // 是为了避免在 wc-markd嵌入代码块示例时, 将其内容编译为html
+        if (~it.indexOf('<wc-code') || ~it.indexOf('wc-code>')) {
           html += it
           isCodeBlock = !isCodeBlock
           continue

src/meditor/index.wc

@@ -423,8 +423,10 @@ export default class Meditor {
     }
     if (isToolbarShow) {
       this.__TOOLBAR__.classList.toggle('active', isToolbarShow)
-      this.__TOOLBAR__.lastElementChild.classList.toggle('active', preview)
+      if (toolbar === null || toolbar.includes('preview')) {
-      this.__VIEW__.classList.toggle('active', preview)
+        this.__TOOLBAR__.lastElementChild.classList.toggle('active', preview)
+        this.__VIEW__.classList.toggle('active', preview)
+      }
     }
   }
 
@@ -763,7 +765,7 @@ export default class Meditor {
   set value(val) {
     this.__EDITOR__.value = val
     if (this.state.preview) {
-      this.__VIEW__.value = val
+      this.__VIEW__.md = val
     }
   }
 
@@ -821,7 +823,7 @@ export default class Meditor {
       if (this.state.preview) {
         var txt = this.__EDITOR__.value.trim()
         if (txt) {
-          this.__VIEW__.value = txt
+          this.__VIEW__.md = txt
         } else {
           this.__VIEW__.clear()
         }