增加markdown组件;优化code组件

src/code/index.wc

@@ -2,6 +2,7 @@
   <div class="code-box">
     <header class="title">
       <span><i></i><i></i><i></i></span>
+      <span></span>
       <span>
         <wc-icon title="运行" class="act run" is="live"></wc-icon>
         <wc-icon title="复制" class="act cp" is="doc"></wc-icon>
@@ -138,23 +139,42 @@ import $ from '../utils'
 export default class Code {
   props = {
     dark: '',
-    inline: '',
+    lang: ''
-    content: ''
   }
 
   __init__() {
     /* render */
+
+    // .code-box
     var elem = this.root.children[1]
+    var header = elem.children[0]
+
     this.__CODE__ = elem.children[1]
-    this.__RUN__ = elem.children[0].children[1].firstElementChild
+
-    this.__CP__ = elem.children[0].children[1].lastElementChild
+    this.__LANG__ = header.children[1]
+    this.__RUN__ = header.children[2].firstElementChild
+    this.__CP__ = header.children[2].lastElementChild
   }
 
   get value() {
     return this.props.content
   }
 
+  set value(txt) {
+    this.props.content = txt
+    txt = txt
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .split('\n')
+    txt = txt.map(s => `<p>${s}</p>`).join('')
+    this.__CODE__.innerHTML = txt
+  }
+
   mounted() {
+    var txt = this.innerHTML || this.textContent
+    this.value = txt.replace(/^[\r\n]|\s{2,}$/g, '')
+    this.textContent = ''
+
     this._cpFN = $.bind(this.__CP__, 'click', ev => {
       try {
         navigator.clipboard.writeText(this.value)
@@ -180,18 +200,14 @@ export default class Code {
 
   watch() {
     switch (name) {
-      case 'content':
+      case 'lang':
-        this.props.content = val
+        this.props.lang = val.toLowerCase()
-        val = val
+        this.__LANG__.textContent = this.props.lang
-          .replace(/</g, '&lt;')
-          .replace(/>/g, '&gt;')
-          .split('\n')
-        val = val.map(s => `<p>${s}</p>`).join('')
-        this.__CODE__.innerHTML = val
-        this.removeAttribute('content')
         break
 
-      default:
+      case 'value':
+        this.value = val
+        this.removeAttribute('value')
         break
     }
   }

src/markd/core.js

@@ -826,48 +826,12 @@ Renderer.prototype.code = function(code, lang, escaped) {
   code = code
     .replace(/&lt;script([^&]*?)&gt;/g, '<script$1>')
     .replace(/&lt;\/script&gt;/g, '</script>')
-  if (this.options.highlight) {
-    var out = this.options.highlight(code, lang)
-    if (out != null && out !== code) {
-      escaped = true
-      code = out
-    }
-  }
 
   //转义特殊字符
-  code = escaped ? code : escape(code, true)
+  code = escape(code, true)
-  lang = this.options.langPrefix + escape(lang, true)
+  lang = escape(lang, true)
 
-  var codes = code.split('\n'),
+  return '<wc-code lang="' + lang + '">' + code + '</wc-code>'
-    ln = codes.length,
-    idx = 0,
-    output = '',
-    multiCom = false
-
-  while (idx++ < ln) {
-    //处理多行注释
-    if (!multiCom) {
-      if (
-        /^\s*?<span class="token comment"/.test(codes[idx - 1]) &&
-        !/<\/span>$/.test(codes[idx - 1])
-      ) {
-        multiCom = true
-        codes[idx - 1] += '</span>'
-      }
-    } else {
-      if (!/<\/span>$/.test(codes[idx - 1])) {
-        codes[idx - 1] =
-          '<span class="token comment">' + codes[idx - 1] + '</span>'
-      } else {
-        codes[idx - 1] = '<span class="token comment">' + codes[idx - 1]
-        multiCom = false
-      }
-    }
-
-    output += '<code class="lang ' + lang + '">' + codes[idx - 1] + '\n</code>' //加\n为了避免空行时无法显示
-  }
-
-  return '<pre skip class="do-ui-blockcode">' + output + '</pre>'
 }
 
 Renderer.prototype.blockquote = function(quote) {
@@ -1399,6 +1363,4 @@ marked.safe = function(txt) {
   return marked(txt)
 }
 
-window.marked = marked
-
 export default marked

src/markd/index.wc

@@ -0,0 +1,253 @@
+<template>
+  <div class="markd"><slot /></div>
+</template>
+
+<style lang="scss">
+:host {
+  display: block;
+  line-height: 1.5;
+  color: nth($cd, 1);
+  font-size: 14px;
+}
+.markd {
+  padding: 10px;
+}
+a {
+  text-decoration: underline;
+  color: nth($ct, 2);
+}
+a:hover {
+  color: nth($ct, 1);
+  text-decoration: none;
+}
+
+em {
+  color: nth($cgr, 3);
+}
+strong {
+  color: nth($cd, 3);
+}
+em,
+strong,
+del {
+  padding: 0 3px;
+}
+p {
+  margin: 15px 0;
+}
+img {
+  max-width: 100%;
+}
+
+blockquote {
+  &.md-quote {
+    margin: 10px 0;
+    padding: 5px 10px;
+    border-left: 5px solid nth($ct, 1);
+    background: #f2faf7;
+    color: nth($cgr, 1);
+
+    p {
+      margin: 0;
+    }
+  }
+}
+
+/* 提醒文本 */
+.md-warn,
+.md-mark {
+  display: inline-block;
+  position: relative;
+  min-height: 35px;
+  margin: 3px 0;
+  padding: 3px 8px 3px 35px;
+  line-height: 27px;
+  border: 1px solid nth($co, 2);
+  border-radius: 5px;
+  background: #fffbed;
+  color: nth($co, 3);
+  word-break: break-all;
+
+  p {
+    margin: 0 !important;
+  }
+  i {
+    position: absolute;
+    left: 8px;
+    top: 6px;
+    line-height: 1;
+    font-size: 20px;
+    color: nth($cr, 2);
+  }
+}
+.md-mark {
+  border-color: nth($ct, 1);
+  color: nth($ct, 3);
+  background: #edfbf8;
+  i {
+    color: nth($ct, 3);
+  }
+}
+.md-task {
+  position: relative;
+  display: inline-block;
+  width: auto;
+  height: 30px;
+  padding-right: 10px;
+  line-height: 30px;
+  text-align: center;
+  cursor: default;
+
+  &__box {
+    float: left;
+    width: 18px;
+    height: 18px;
+    margin: 6px;
+    margin-left: 0;
+    line-height: 1;
+    border: 1px solid nth($cgr, 1);
+    border-radius: 3px;
+    font-size: 16px;
+    text-align: center;
+  }
+  &.done {
+    .md-task__box {
+      color: nth($cgr, 1);
+      border-color: nth($cp, 3);
+      background: nth($cp, 3);
+    }
+    .md-task__text {
+      color: nth($cgr, 1);
+      text-decoration: line-through;
+    }
+  }
+}
+
+hr {
+  height: 1px;
+  margin: 30px 0;
+  line-height: 1px;
+  border: 0;
+  color: nth($cgr, 1);
+  background-color: nth($cgr, 1);
+}
+ol {
+  margin-left: 1em;
+  list-style: decimal outside none;
+}
+ul {
+  margin-left: 1em;
+  list-style: disc outside none;
+}
+li {
+  margin: 0.5em 0;
+}
+li ol {
+  margin-left: 1em;
+}
+li ul {
+  margin-left: 1em;
+  list-style-type: circle;
+}
+li ol ul,
+li ul ul {
+  list-style-type: square;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  position: relative;
+  margin: 15px 0;
+  font-weight: bold;
+  font-size: 16px;
+
+  span {
+    position: relative;
+    display: inline-block;
+    padding: 0 5px;
+  }
+  a {
+    visibility: hidden;
+    position: absolute;
+    left: -25px;
+    width: 25px;
+    padding: 0 3px;
+    font-weight: bold;
+    text-decoration: none;
+    text-align: center;
+  }
+  &:hover a {
+    visibility: visible;
+  }
+}
+h1 {
+  margin: 0 0 30px;
+  font-size: 24px;
+}
+h2 {
+  margin: 20px 0;
+  font-size: 22px;
+}
+h3 {
+  margin: 20px 0 15px;
+  font-size: 20px;
+}
+h4 {
+  font-size: 18px;
+}
+
+table {
+  border-spacing: 0;
+  border-collapse: collapse;
+
+  tr {
+    border-top: 1px solid #ccc;
+    background-color: #fff;
+  }
+  thead tr {
+    background: nth($cp, 1);
+  }
+  th,
+  td {
+    padding: 6px 13px;
+    border: 1px solid #ddd;
+  }
+  th {
+    font-weight: bold;
+  }
+  tr:nth-child(2n) {
+    background-color: #fbfbfb;
+  }
+}
+
+code.inline {
+  color: nth($co, 3);
+}
+</style>
+
+<script>
+import $ from '../utils'
+import '../code/index'
+
+import parser from './core'
+
+export default class Markd {
+  props = {}
+  __init__() {
+    /* render */
+
+    var elem = this.root.children[1]
+
+    this.__BOX__ = elem
+  }
+
+  mounted() {
+    this.__BOX__.innerHTML = parser.safe(this.textContent)
+    this.textContent = ''
+  }
+}
+</script>

src/scroll/index.wc

@@ -219,13 +219,13 @@ export default class Scroll {
 
     // 鼠标滚动事件
     this._wheelFn = $.catch(this.__BOX__, 'wheel', ev => {
-      ev.preventDefault()
       var { sh, oh, yh, sw, ow, xw } = this.props
 
       // x轴 y轴 都为0时, 不作任何处理
       if (!xw && !yh) {
         return
       }
+      ev.preventDefault()
 
       //校正兼容苹果鼠标在 chrome和FF下滚动的精度
       var deltaX