pk8f3pmu2/miniprogram/components/rich-md/rich-md.js

if (!global.towxml)
  global.towxml = require('../../towxml/index');

Component({
  externalClasses: ['my-class',"class"],
  properties: {
    nodes:{
      type:String,
      observer:function(nodes){
        this.process();
      }
    },
    datakey:{
      type:String,
      observer:function(key){
        console.log("data_key",key, this.data);
        wx.getStorage({
          key,
          success: res=>{
            //console.log("getStorage", res);
            this.setData({_nodes:res.data});
          },
        });
        return key;
      }
    },
    theme:{
      type:String,
      value:"light",
      observer:function(theme,old){
        let {type} = this.data;
        if(this.ready&&theme!=old&&(type=='html'||type=='markdown'))
          this.process();
      }
    },
    base:{
      type:String,
      value: "https://www.educoder.net/"
    },
    type:{
      type:String,
      value: ""
    }
  },

  data: {
  },
  
  methods: {
    handleTap(e){
      //console.log(this.data);
      console.log("handleTap",e, this.data,this);
      var {target:{dataset:{data}}} = e;
      var key = "RICHMDKEY";
      //console.log(data);
      if(data&&data._e.tag=="code")
        data={attr:{class:"h2w__pre"},child:[data],tag:"view",type:"tag",_e:{type:"tag",attr:{},tag:"pre", child:[data]}}
      if(data&&data._e.tag=='pre'){
        data = {theme:this.data.theme,child:[data],_e:{child:[data]}}
        wx.setStorage({
          key,data,success:res=>{
            wx.navigateTo({
              url: `/components/rich-md/rich-md?datakey=${key}&type=html`
            })
          }
        })
      }
    },
    /**
     * difficult:
     * 例如，`3.9E3`代表`3.9×$$10^{3}$$`，等同于`3900`
     * `$$S$$`为每`lbs/$$in^{2}$$`上的压力
     * 每月还贷公式为`$$\\frac{Pr'(1+r')^{N'}}{(1+r')^{N'}-1}$$`，其中`r'`为月利息。（提示：`$$r'=\\frac{r}{1200}$$`，`N'=N*12`）。
     * 该程序接收用户的`4`个输入$$x_1$$，$$y_1$$，$$x_2$$，$$y_2$$（分别表示地球上两个点的维度和经度，单位是度）
     * 计算公式为：$$r^{3}=\\frac{dp}{\\pi S}$$，其中
     */
    process(){
      let {type, nodes} = this.data;
      //console.log(type);
      if(!type){
        if (nodes.match(/<img .*src=.*>/))
          type = "html"
        else if (nodes.match(/^\s*<.+>.*<\/.+>/s))
          type = "rich-text";
        else if(nodes.match(/##+|\*.+\*|- |`|\$|\[.*\]\(.+\)|\|.+\|/))
          type = "markdown";
        else if(nodes.match(/<.+>.*<\/.+>|&nbsp/s))
          type= "rich-text";
        else
          type = "plain";
      }
      if(type=="markdown"||type=="html"){
        nodes = nodes.replace(/(#+)/g, "$1 ").replace(/`\$\$\s*([^\$`]*?)\s*\$\$`/g, "$$$1$$").replace(/\$\$\s*([^\$`]*?)\s*\$\$/g, "$$$1$$").replace(/```latex\n(.*?)\n```/g,"$$$$\n$1\n$$$$");
        // console.log(nodes);
        var _nodes = global.towxml(nodes, type, { theme:this.data.theme,base: this.data.base,events:{
				    tap:e=>{
              this.handleTap(e);
            }
			    } 
        });
        console.log("towxml", _nodes);
        this.setData({_nodes, type});
      }else{
        this.setData({nodes, type})
      }
      this.ready = true;
    }
  }
})