huazhi-article/parse.js

/* eslint-disable indent */
import { isObject, isString } from './utils';
import { computedImageSize } from './helpers';
import { addEvent } from './helpers';
import EMOJIMAP from './emoji.json';

/**
 * @type {boolean} 是否开发环境
 */
let isDev = false;

/**
 * @type {boolean} 是是否服务端渲染
 */
let isSSR = false;

try {
  isDev = process.env && process.env.NODE_ENV === 'development';

  isSSR = process.env && process.env.VUE_ENV === 'server';
} catch (e) {
  //
}

/**
 * @type {Regexp} 判断是否合法图片
 */
const validImageRegexp = /^(http|https):\/\/(imgtest|img)\.guihuazhi\.com\/[A-z0-9/.]*?$/;

/**
 * @type {Regexp} 表情校验
 */
const validEmoji = /(\[[\u4e00-\u9fa5]{1,4}\])/g;

class Parse {
  constructor(option) {
    this.platform = option.platform;
  }

  createElement(d) {
    if (isObject(d)) {
      const { tag, attrs = {}, child = [], props, content } = d;
      let node = document.createElement(tag);

      Object.keys(attrs).forEach(function(key) {
        node.setAttribute(key, attrs[key]);
      });

      if (tag === 'img') {
        node = this.renderImageDom(props, attrs);
      }

      if (tag === 'a') {
        node = this.renderLinkDom(props);
      }

      if (content) {
        node.innerHTML = content;
      } else {
        child.forEach(c => {
          node.appendChild(this.createElement(c));
        });
      }

      return node;
    } else if (typeof d === 'string') {
      return document.createTextNode(d);
    }
  }

  reset() {
    this.unbindImageEvents && this.unbindImageEvents();
  }

  // 懒加载图片
  bindImageLazyLoad() {
    this.clientHeight = window.screen.height;

    this.unbindImageEvents = addEvent(
        window,
        'scroll',
        this.loadImageFunc.bind(this)
    );
    setTimeout(() => {
      // 初始化时加载一次图片
      this.loadImageFunc();
    }, 0);
  }

  // 取消懒加载图片
  unbindImageLazyLoad() {
    this.unbindImageEvents();
  }

  loadImageFunc() {
    (this.imageDoc =
        this.imageDoc ||
        document.querySelectorAll(`.huazhi.huazhi-${this.platform} img`)).forEach(
        el => {
          if (el.getAttribute('src')) return;

          const { src } = el.dataset;

          const o = el.getBoundingClientRect();

          if (o.top < this.clientHeight) {
            el.setAttribute('src', src);
            el.previousSibling.style.opacity = 0;
          }
        }
    );
  }

  /**
   * dom-tree => html
   * @param {array<object>} tree
   */
  renderDomTreeHTML(tree, platform) {
    return tree
        .map(block => {
          switch (block.tag) {
            case 'h2':
              return `<h2>${this.renderDomTreeHTML(block.child)}</h2>`;

            case 'blockquote':
              return `<blockquote>${this.renderDomTreeHTML(
                  block.child
              )}</blockquote>`;

            case 'p':
              return `<p>${this.renderDomTreeHTML(block.child)}</p>`;

            case 'b':
              return `<b>${block.content}</b>`;

            case 'i':
              return `<i style="background-image: url(${
                  block.props.url
                  })" emoji="${block.props.emoji}"></i>`;

            case 'img':
              return this.renderImage(block.props, block.attrs);

            case 'video':
              return this.renderVideo(block.props);

            case 'hr':
              return '<hr />';

            case 'a':
              return this.renderLink(block.props);

              // webview内禁止直接跳转
            default:
              // 非兼容格式不做显示
              return isString(block) ? block : '';
          }
        })
        .join('');
  }

  // replaceBlock(block) {
  //   return block.replace
  // }

  /**
   * 针对web的文本解析处理
   * @param {array<object>} json
   * @return
   */
  jsonToDomTree(json) {
    let results = [];
    let imageIndex = 0;

    if (typeof json === 'string') {
      try {
        json = JSON.parse(json);
      } catch (e) {
        //
        return results;
      }
    }

    for (let i = 0, l = json.length; i < l; i++) {
      let block = json[i];
      if (block.type === 'text') {
        let tag;
        if (block.head === 1) {
          tag = 'h2';
        } else if (block.block === 1) {
          tag = 'blockquote';
        } else {
          tag = 'p';
        }
        let child = this.parseInline(block.value);
        results.push({ tag, child });
      } else if (block.type === 'image' && this.isImage(block)) {
        results.push({
          tag: 'img',
          attrs: {
            src: block.url,
            index: imageIndex++
          },
          props: block
        });
      } else if (block.type === 'line') {
        results.push({
          tag: 'hr'
        });
      } else if (block.type === 'video') {
        results.push({
          tag: 'video',
          props: block
        });
      }
    }

    return results;
  }

  /**
   * 评论中的文本解析
   * @param {string} str 评论文本
   * @return {string} html文本
   */
  parseComment(str) {
    let result = this.parseEmoji(str);
    let html = this.renderDomTreeHTML(result, this.platform);
    return html;
  }

  /**
   * json => html
   * @param  {string|array<object>} json 原始json数据 | 数组结构
   * @param {string} platform 平台 web | mobile | webview | editor
   * @param {HTMLElement} wrapperDom 是否返回document对象
   * @param {number} containerWidth 容器宽度
   * @return {string|HTMLElement} html字符串/document对象
   */
  jsonToHTML(json, wrapperDom, containerWidth = 0) {
    // json解析
    if (typeof json === 'string') {
      try {
        json = JSON.parse(json);
      } catch (e) {
        if (isDev) throw new Error('json type error');
        return '';
      }
    }

    const tree = this.jsonToDomTree(json);

    // console.log('tree', JSON.parse(JSON.stringify(tree)))

    let html = this.renderDomTreeHTML(tree, this.platform, containerWidth);
    // ssr环境或者editor直接返回html
    if (isSSR || this.platform === 'editor') {
      return html;
    }

    if (wrapperDom) {
      wrapperDom.classList.add('huazhi', `huazhi-${this.platform}`);
      wrapperDom.innerHTML = html;
    }

    // 移动端初始化
    if (this.lazyLoad) {

      this.bindImageLazyLoad();
    }

    if (this.initEvents && typeof this.initEvents === 'function') {
      this.initEvents();
    }

    return wrapperDom ? wrapperDom : html;
  }

  renderText(value) {
    let html = '';
    let length = value.length;
    for (let i = 0; i < length; i++) {
      let v = value[i];
      if (v.bold) {
        html += `<strong>${v.content}</strong>`
      } else if (v.type === 'link') {
        html += `${this.renderLink(v)}`
      } else {
        html += `${v.content}`
      }
    }
    if (length === 0) {
      html = '<br>'
    }
    return html;
  }

  renderBlock(o) {
    let classStr = o.center ? "class='ql-align-center'" : '';
    if (o.head) {
      return `<h2 ${classStr}>${this.renderText(o.value)}</h2>`
    } else if (o.block) {
      return `<blockquote ${classStr}>${this.renderText(o.value)}</blockquote>`
    } else {
      return `<p ${classStr}>${this.renderText(o.value)}</p>`
    }
  }

  renderLine() {
    return "<hr />"
  }

  renderList(o) {
    let html = '';
    let liList = '';
    let length = o.value.length;
    for (let i = 0; i < length; i++) {
      let v = o.value[i];
      liList += `<li>${this.renderText(v)}</li>`
    }
    if (o.type === 'ol') {
      html = `<ol>${liList}</ol>`
    } else if (o.type === 'ul') {
      html = `<ul>${liList}</ul>`
    }
    return html
  }

  /**
   * json => html
   * @param  {string|array<object>} json 原始json数据 | 数组结构
   * @param {string} platform 平台 web | mobile | webview | editor
   * @param {HTMLElement} wrapperDom 是否返回document对象
   * @param {number} containerWidth 容器宽度
   * @return {string|HTMLElement} html字符串/document对象
   */
  jsonToHTML2(json, wrapperDom, containerWidth = 0) {
    // json解析
    if (typeof json === 'string') {
      try {
        json = JSON.parse(json);
      } catch (e) {
        if (isDev) throw new Error('json type error');
        return '';
      }
    }
    // const renderMap = {
    //   'text': this.renderBlock,
    //   'line': this.renderLine,
    //   'image': this.renderImage,
    //   'video': this.renderVideo,
    //   'ul': this.renderList,
    //   'ol': this.renderList,
    // };
    let html = '';
    let length = json.length;
    for (let i = 0; i < length; i++) {
      let j = json[i];
      let type = j.type;
      if (type === 'text') {
        html +=this.renderBlock(j)
      } else if (type === 'line') {
        html +=this.renderLine(j)
      } else if (type === 'image') {
        html +=this.renderImage(j)
      } else if (type === 'video') {
        html +=this.renderVideo(j)
      } else if (type === 'ul' || type === 'ol') {
        html +=this.renderList(j)
      } else {
        if (j.content) {
          html += `<p>${json[i].content}</p>`
        }
      }
    }

    if (this.initEvents && typeof this.initEvents === 'function') {
      // webview绑定事件
      this.initEvents();
    }


    return html;

  }

  /**
   * 解析表情
   * @param {string} 原始文本
   * @return {array<object|string>} 表情字符串数组
   */
  parseEmoji(text) {
    if (typeof text !== 'string') return '';
    let results = [];
    let splitIndex = 0;
    let tmp;

    while ((tmp = validEmoji.exec(text))) {
      let { 0: emojiName, index: startIndex } = tmp;
      let { lastIndex } = validEmoji;
      // 若表情存在
      if (EMOJIMAP[emojiName]) {
        results.push(text.substring(splitIndex, startIndex));

        results.push({
          tag: 'i',
          props: {
            emoji: emojiName,
            url: EMOJIMAP[emojiName].url
          },
          attr: {}
        });

        // 修改下次截取位置
        splitIndex = lastIndex;
      }
    }

    // 末尾处理
    if (splitIndex < text.length) {
      results.push(text.substring(splitIndex));
    }

    return results;
  }

  /**
   * 解析行内文本
   * @param {array<object>} 行内文本数组
   * @param {string} platform
   */
  parseInline(inlineList) {
    let results = [];
    for (let j = 0, l = inlineList.length; j < l; j++) {
      let inline = inlineList[j];
      if (inline.type === 'string') {
        if (this.platform === 'editor') {
          // 编辑器连续换行bug
          if (j === inlineList.length - 1) {
            if (inline.content.endsWith('\n') || inline.content.endsWith('\r\n')) {
              inline.content = inline.content.slice(0, -1)
            }
          }
        }
        if (inline.bold === 1) {
          // 加粗文本
          results.push({ tag: 'b', attr: {}, content: inline.content });
        } else {
          // 纯文本
          results.push(...this.parseEmoji(inline.content));
        }
      } else if (inline.type === 'link') {
        results.push({
          tag: 'a',
          props: {
            ...inline,
          }
        });
      }
    }

    return results;
  }

  /**
   * 校验是否合法图片
   * @param {object} image 上传获得image对象
   * @return {boolean} 检测结果
   */
  isImage(image) {
    return (
        isObject(image) &&
        typeof image.url === 'string' &&
        validImageRegexp.test(image.url)
    );
  }

  /**
   * html => json
   * 富文本编辑内容格式化
   * @param {string|object} source html字符串/detail结构
   * @param {boolean} isOps 是否quill的detail结构
   * @param {boolean} isJSonString 是否转为json-string
   * @return {array<object>} j
   */
  htmlToJSON(source, isOps, isJSonString = true) {
    if (isUndefined(source) || (!isString(source) && !isArray(source))) {
      if (isDev)
        throw new Error('source must be a string type or quill detail');

      return isJSonString ? '[]' : [];
    }

    let results = [];

    return results;
  }
}

export default Parse;