wcui/src/code/index.wc

<template>
  <div class="code-box">
    <header class="title">
      <section><i></i><i></i><i></i></section>
      <section></section>
      <section>
        <wc-icon title="运行" class="act run" is="live"></wc-icon>
        <wc-icon title="复制" class="act cp" is="doc"></wc-icon>
      </section>
    </header>
    <wc-scroll axis="y" class="scroll"></wc-scroll>
  </div>
</template>

<style lang="scss">
:host {
  display: flex;
  border-radius: 3px;
}

.code-box {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  max-height: 610px;
  margin: 10px 0;
  border-radius: 3px;
  background: #f7f8fb;
  color: var(--color-dark-1);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);

  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 32px;
    padding: 0 12px;
    line-height: 1;
    font-size: 14px;
    user-select: none;

    section {
      display: flex;
      align-items: center;
    }

    i {
      display: block;
      width: 12px;
      height: 12px;
      margin-right: 6px;
      border-radius: 50%;
      background: var(--color-red-1);

      &:nth-child(2) {
        background: var(--color-orange-1);
      }
      &:nth-child(3) {
        background: var(--color-green-1);
      }
    }

    .act {
      --size: 18px;
      margin: 0 6px;
      color: var(--color-grey-2);
      cursor: pointer;

      &:hover {
        color: var(--color-grey-3);
      }
      &.run {
        display: none;
      }
    }
  }

  .scroll {
    overflow: hidden;
    flex: 1;
    line-height: 20px;
    font-size: 14px;
    color: var(--color-dark-1);
    cursor: text;
    counter-reset: code;

    code {
      display: block;
      position: relative;
      min-height: 20px;
      padding: 0 8px 0 45px;
      font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
      white-space: pre-wrap;
      word-break: break-word;

      &::before {
        position: absolute;
        left: 0;
        width: 40px;
        height: 100%;
        padding-right: 5px;
        text-align: right;
        color: var(--color-grey-1);
        content: counter(code);
        counter-increment: code;
      }

      i {
        font-style: normal;
      }

      .r {
        color: var(--color-red-2);
      }
      .b {
        color: var(--color-blue-2);
      }
      .g {
        color: var(--color-green-2);
      }
      .gr {
        color: var(--color-grey-2);
      }
      .o {
        color: var(--color-orange-1);
      }
      .pp {
        color: #a46ad3;
      }
      .link {
        font-style: italic;
        text-decoration: underline;
        color: var(--color-grey-2);
      }
    }
  }
}

:host([exec]) {
  .title {
    .run {
      display: block;
    }
  }
}

:host([hide-copy]) {
  .title {
    .cp {
      display: none;
    }
  }
}

:host([dark]) {
  .code-box {
    border-color: var(--color-dark-2);
    background: var(--color-dark-1);
    color: var(--color-plain-3);

    .scroll {
      color: var(--color-plain-2);

      code::before {
        color: var(--color-grey-3);
      }
    }
  }
}
</style>

<script>
import '../scroll/index'
import '../layer/index'
import $ from '../utils'
import { colorHtml, colorCss, colorJs, colorMd } from './colorful'

export default class Code {
  props = {
    dark: '',
    lang: '',
    code: ''
  }

  state = {
    content: ''
  }

  __init__() {
    /* render */

    // .code-box
    var elem = this.root.children[1]
    var header = elem.children[0]

    this.__CODE__ = elem.children[1]

    this.__LANG__ = header.children[1]
    this.__RUN__ = header.children[2].firstElementChild
    this.__CP__ = header.children[2].lastElementChild
  }

  get code() {
    return this.state.content
  }

  set code(txt) {
    this.state.content = txt

    switch (this.props.lang) {
      case 'html':
        txt = colorHtml(txt)
        break

      case 'css':
      case 'scss':
      case 'less':
        txt = colorCss(txt)
        break

      case 'md':
      case 'markdown':
        txt = colorMd(txt)
        break

      case 'js':
      case 'ts':
      case 'javascript':
      case 'typescript':
        txt = colorJs(txt)
        break

      default:
        txt = txt.replace(/</g, '&lt;').replace(/>/g, '&gt;')
        break
    }

    txt = txt
      .split('\n')
      .map(s => `<code>${s}</code>`)
      .join('')
    this.__CODE__.innerHTML = txt
  }

  mounted() {
    var txt = this.innerHTML || this.textContent

    txt = txt.trim().replace(/^[\r\n]|\s{2,}$/g, '')
    if (txt.startsWith('<xmp>') && txt.endsWith('</xmp>')) {
      txt = txt.slice(5, -6).trim()
    }
    if (txt) {
      this.code = txt
      this.textContent = ''
    }

    this._cpFN = $.bind(this.__CP__, 'click', ev => {
      try {
        navigator.clipboard.writeText(this.code)
        layer.toast('复制到粘贴板成功', 'success')
      } catch (err) {
        layer.toast('复制到粘贴板失败', 'error')
      }
    })
    // 运行按钮的点击, 内部不处理逻辑, 传递给外部的run事件
    this._runFN = $.bind(this.__RUN__, 'click', ev => {
      this.dispatchEvent(
        new CustomEvent('run', {
          detail: this.code
        })
      )
    })
  }

  unmounted() {
    $.unbind(this.__CP__, 'click', this._cpFN)
    $.unbind(this.__RUN__, 'click', this._runFN)
  }

  watch() {
    switch (name) {
      case 'lang':
        this.props.lang = (val || '').toLowerCase()
        this.__LANG__.textContent = this.props.lang
        break

      case 'code':
        if (val !== null) {
          this.code = val
          this.removeAttribute('code')
        }
        break
    }
  }
}
</script>