Coder Social home page Coder Social logo

taro-wemark's People

Contributors

kapeter avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

taro-wemark's Issues

不好用,但是如果我把代码更新了,把block删了换成View,又没样式,大佬,要不您说说咋解决样式的事得了

import Taro from '@tarojs/taro'
import React, {useEffect, useState} from 'react';
import {View, Text, Image, Video} from '@tarojs/components'
import "./taro-wemark.css"
import Remarkable from "./remarkable"

let parser = new Remarkable({
html: true
});

export default (props) => {
const [renderList, setRenderList] = useState();

useEffect(() => {
if (props.md) {
setRenderList(parse(props.md))
}
}, [props.md])

const parse = (md, options) => {

if (!options) options = {};
if (!options.name) options.name = 'wemark';

let tokens = parser.parse(md, {});

// markdwon渲染列表
let renderList = [];
// 图片高度数组
let imageHeight = {};
// 返回的数据
let ret = {
  renderList: renderList,
  imageHeight: imageHeight
};

let env = [];
// 记录当前list深度
let listLevel = 0;
// 记录第N级ol的顺序
let orderNum = [0, 0];
let tmp;

// 获取inline内容
const getInlineContent = function (inlineToken) {
  let ret = [];
  let env;

  if (inlineToken.type === 'htmlblock') {
    // 匹配video
    // 兼容video[src]和video > source[src]
    let videoRegExp = /<video.*?src\s*=\s*['"]*([^\s^'^"]+).*?(poster\s*=\s*['"]*([^\s^'^"]+).*?)?(?:\/\s*\>|<\/video\>)/g;

    let match;
    let html = inlineToken.content.replace(/\n/g, '');
    while (match = videoRegExp.exec(html)) {
      if (match[1]) {
        let retParam = {
          type: 'video',
          src: match[1]
        };

        if (match[3]) {
          retParam.poster = match[3];
        }

        ret.push(retParam);
      }
    }
  } else {
    inlineToken.children && inlineToken.children.forEach(function (token, index) {
      if (['text', 'code'].indexOf(token.type) > -1) {
        ret.push({
          type: env || token.type,
          content: token.content
        });
        env = '';
      } else if (token.type === 'del_open') {
        env = 'deleted';
      } else if (token.type === 'strong_open') {
        env = 'strong';
      } else if (token.type === 'em_open') {
        env = 'em';
      } else if (token.type === 'image') {
        ret.push({
          type: token.type,
          src: token.src
        });
      }
    });
  }

  return ret;
};

const getBlockContent = function (blockToken, index) {
  if (blockToken.type === 'htmlblock') {
    return getInlineContent(blockToken);
  } else if (blockToken.type === 'heading_open') {
    return {
      type: 'h' + blockToken.hLevel,
      content: getInlineContent(tokens[index + 1])
    };
  } else if (blockToken.type === 'paragraph_open') {
    let type = 'p';
    let prefix = '';
    if (env.length) {
      prefix = env.join('_') + '_';
    }

    let content = getInlineContent(tokens[index + 1]);

    // 处理ol前的数字
    if (env[env.length - 1] === 'li' && env[env.length - 2] === 'ol') {
      content.unshift({
        type: 'text',
        content: orderNum[listLevel - 1] + '. '
      });
    }

    return {
      type: prefix + 'p',
      content: content
    };
  } else if (blockToken.type === 'fence') {
    return {
      type: 'code',
      content: blockToken.content
    };
  } else if (blockToken.type === 'code') {
    return {
      type: 'code',
      content: blockToken.content
    };
  } else if (blockToken.type === 'bullet_list_open') {
    env.push('ul');
    listLevel++;
  } else if (blockToken.type === 'ordered_list_open') {
    env.push('ol');
    listLevel++;
  } else if (blockToken.type === 'list_item_open') {
    env.push('li');
    if (env[env.length - 2] === 'ol') {
      orderNum[listLevel - 1]++;
    }
  } else if (blockToken.type === 'list_item_close') {
    env.pop();
  } else if (blockToken.type === 'bullet_list_close') {
    env.pop();
    listLevel--;
  } else if (blockToken.type === 'ordered_list_close') {
    env.pop();
    listLevel--;
    orderNum[listLevel] = 0;
  } else if (blockToken.type === 'blockquote_open') {
    env.push('blockquote');
  } else if (blockToken.type === 'blockquote_close') {
    env.pop();
  } else if (blockToken.type === 'tr_open') {
    tmp = {
      type: 'table_tr',
      content: []
    };
    return tmp;
  } else if (blockToken.type === 'th_open') {
    tmp.content.push({
      type: 'table_th',
      content: getInlineContent(tokens[index + 1]).map(function (inline) {
        return inline.content;
      }).join('')
    });
  } else if (blockToken.type === 'td_open') {
    tmp.content.push({
      type: 'table_td',
      content: getInlineContent(tokens[index + 1]).map(function (inline) {
        return inline.content;
      }).join('')
    });
  }
};

tokens.forEach(function (token, index) {
  let blockContent = getBlockContent(token, index);
  if (!blockContent) return;
  if (!Array.isArray(blockContent)) {
    blockContent = [blockContent];
  }
  blockContent.forEach(function (block) {
    if (Array.isArray(block.content)) {
      block.isArray = true;
    } else {
      block.isArray = false;
    }
    renderList.push(block);
  });
});

let obj = {};
obj[options.name] = ret;

return renderList;

}

return (

{
renderList instanceof Array && renderList.length > 0 && renderList.map((renderBlock) => {
console.log('renderBlock', renderBlock);
return (<View className={'wemark_block_' + renderBlock.type} key={renderBlock.blockIndex}>
{
renderBlock.isArray &&
renderBlock.content.map((renderInline) =>

{
renderInline.type !== 'image' ?
<Text className={'wemark_inline_' + renderInline.type}>{renderInline.content}
:
}

)
}
{
!renderBlock.isArray && renderBlock.type === 'code' && {renderBlock.content}
}
{
!renderBlock.isArray && renderBlock.type === 'video' &&

}
)
}
)
}

)
}

这代码被我改成这样了,因为你那个Taro.Component不好使,而且不是函数式的话你上来它小程序第一次constructor里面不激活componentwillreceiveprops,然后我也不想动constructor,所以就改成函数式了,然后现在就面临着没样式的问题。
image
实在是太白辣!!!!!!!!!!!!!!!!!!!!!!!!!!!!
大佬咋整啊啊

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.