update

src/app.scss

@@ -0,0 +1,3 @@
+html,body{
+    user-select: auto !important;
+}

src/pages/index/index.jsx

@@ -1,6 +1,14 @@
 import { Component } from "react";
 import Taro from "@tarojs/taro";
-import { View, Text, Image, Button } from "@tarojs/components";
+import {
+  View,
+  Text,
+  Image,
+  Button,
+  Input,
+  Editor,
+  Textarea,
+} from "@tarojs/components";
 import "./index.scss";
 import { AtTabBar } from "taro-ui";
 import React, { useCallback, useEffect, useState } from "react";
@@ -19,8 +27,43 @@ import { AtIcon } from "taro-ui";
 import see from "../../images/see.png";
 import group from "../../images/group.png";
 import { marked } from "marked";
+import _ from "lodash";
+import OriginMark from "./conpoments/OriginMark/index";
+
+// marked.use(`marked-code-jsx-renderer`);
+// marked.use(`marked-extended-tables`);
+
+// ![测试图片2](http://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/202304081955211.png)
+
+const markTextStr = `
+  ## 标题
+  > 测试引用桔子的样子
+随便测试普通的文本,要不要来个\`内敛\`的字符串
+   ---
+   - 无序列表1
+   个人有看看
+  - 无序列表2
+   - [ ] 任务列表
+   - [x] 完成任务
+   1. 测试111
+   恶魔女哪里的请
+   2. 你好啊
+   3. iefw4t43t43t
+   永远不要相信一个
+   ---
+   相信我
+   `;
+
+let tablecellArr = [];
+let tableRowArr = [];
+let maxLengthCell = null;
+let bodydata = null;
+let headerdata = null;
+let maxWidths = null;
+
 marked.setOptions({
   breaks: true, // 是否回车换行
+  gfm: true, //使用经批准的 GitHub Flavored Markdown (GFM) 规范
   highlight(code, lang) {
     //  语法高亮
     let val = code;
@@ -32,48 +75,219 @@ marked.setOptions({
     return val;
   },
 });
+// 符号
+// 🔥❓👉
+// 0️⃣1️⃣2️⃣3️⃣4️⃣5️⃣6️⃣7️⃣8️⃣9️⃣🔟
+// ©️⭐🔍〰️➖
 const renderer = new marked.Renderer();
+const originRenderer = _.cloneDeep(renderer);
+
 // 图片调整300px
 renderer.image = function (href, title, text) {
-  console.log("href, title, text", href, title, text);
-  return `<img width="300px"  src="${href}" alt="${text}"/>
-  <div class="desc">🥶${text}</div>`;
+  // console.log("href, title, text", href, title, text);
+  // <div class="desc">${text}</div>
+  return `<img width="300px"  src="${href}" alt="${text}"/>`;
+};
+
+
+// let  listSinbal="▫️ "
+let  listSinbal="🔸"
+
+// 有序列表
+renderer.list = function (body, ordered, start) {
+
+  // console.log("body,ordered, start", body, ordered, start);
+  const type = ordered ? "ol" : "ul";
+  // console.log("type===>", type);
+  const startatt = ordered && start !== 1 ? ' start="' + start + '"' : "";
+  // 正则取值
+  // const regex = /▫️\s*(.*?)<br\/?>/g;
+  const regex = /([^<]*)<br\/?>/g;
+  const input = body;
+  const matches = [...input.matchAll(regex)];
+  const texts = matches.map((match) => match[1]);
+  // 不含▫️的元素数量
+  // const diffcCount=texts.length-texts.filter(item => item.includes('▫️')).length;
+  // console.log("texts===>", texts); // 输出: ["测试111", "测试222", "if"]
+  const newArray = texts.filter((item) => item.includes(listSinbal));
+  // 0️⃣',
+  const numbers = ["1️⃣", "2️⃣", "3️⃣", "4️⃣", "5️⃣", "6️⃣", "7️⃣", "8️⃣", "9️⃣", "🔟"];
+  const string = texts
+    .map((value, index) => {
+      // console.log("value, index==>", value, index);
+      // ${ value.indexOf("▫️ ") === -1 ? '<br/><span>111</sapn>' : ""}
+      return value.indexOf(listSinbal) !== -1
+        ? `<div>${
+            type === "ol" ? numbers[newArray.indexOf(value)] : listSinbal
+          }${value.replace(listSinbal, "")} </div>`
+        : `<div style="white-space:pre;">\t${value}</div>`;
+    })
+    .join("");
+  // return `1️⃣`
+  // console.log("string===>", string);
+
+  return `${string}`;
+};
+
+// 无序列表  ▫️
+renderer.listitem = function (text, task, checked) {
+  // return `<li>${text}</li>\n`;
+  return `${listSinbal}${text}<br/>`
+  // return `➖${text}<br/>`;
+  ;
+
+};
+
+// 任务列表
+renderer.checkbox = function (checked) {
+  // ✅❌
+  return !!checked ? "✅" : "❌";
+  return (
+    "<input " + (checked ? 'checked="" ' : "") + 'disabled="" type="checkbox">'
+  );
+};
+
+// 标题
+renderer.heading = function (text, level, raw) {
+  // ignore IDs
+  // return `📋<span>${text}</span> <br/>`;
+  return `🔥<span>${text}</span> <br/>`;
+  // return `<h${level}>${text}</h${level}>\n`;
+};
+
+// 分隔符
+renderer.hr = function () {
+  // return '<hr>\n';
+  return "➖➖➖➖➖<br/>";
+};
+
+// 内联样式,使用直角引号「」
+renderer.codespan = function (text) {
+  // return `「${text}」`;
+  return `『${text}』`;
 };
 
 // 引用符号
 renderer.blockquote = function (quote) {
-  console.log("quote", quote);
+  // console.log("quote", quote);
   var regex = /<p>(.*?)<\/p>/;
   var str = quote;
   var match = regex.exec(str);
   if (match != null) {
     var content = match[1]; // 获取第一个捕获组的内容
-    console.log(content);
+    // console.log(content);
   }
-  return `❣️<span class="blockquote">${content}</span>`;
+  // <pre></pre>
+  // &nbsp;
+  return `<span style="white-space:pre;" class="blockquote">\t 👉${content}</span><br/> `;
 };
 
+renderer.table = function (header, body) {
+  if (body) body = `<tbody>${body}</tbody>`;
+
+  return (
+    "📊 表格 📊<br/><table>\n" +
+    "<thead>\n" +
+    header +
+    "</thead>\n" +
+    body +
+    "</table>\n"
+  );
+};
+
+renderer.tablerow = function (content) {
+  return `<tr>\n${content}</tr>\n`;
+};
+
+
+renderer.tablecell = function (content, flags) {
+  const type = flags.header ? "th" : "td";
+  const tag = flags.align ? `<${type} align="${flags.align}">` : `<${type}>`;
+  return tag + `|${content}` + `</${type}>\n`;
+};
+
+function cleanUrl(href) {
+  try {
+    href = encodeURI(href).replace(/%25/g, '%');
+  } catch (e) {
+    return null;
+  }
+  return href;
+}
+
+renderer.link = function (href, title, text) {
+  const cleanHref = cleanUrl(href);
+  if (cleanHref === null) {
+    return text;
+  }
+  href = cleanHref;
+  let out = '<a href="' + href + '"';
+  if (title) {
+    out += ' title="' + title + '"';
+  }
+  out += ">" +`🌐`+ text + "</a>";
+  // out += ">" +`🌐`+ text + "</a>"+`(${href})`;
+
+  return out;
+};
+
+// 使用拓展
 marked.use({ renderer });
-const markTextStr = marked(
-  `![测试图片2](http://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/202304081955211.png)
-   >测试`
-);
+
 // export default class Index extends Component {
 const Index = () => {
-  const [markText, setmarkText] = useState(null);
+  const [markText, setmarkText] = useState(``);
+  const [oldmarkText, setoldmarkText] = useState(null);
+  const [currentRender, setcurrentRender] = useState(null);
+  const [markdownTable, setmarkdownTable] = useState();
+  const [tablecellArr, settablecellArr] = useState([]);
+
+  const onConfirm = (onConfirmtxt) => {
+    console.log("onConfirmtxt--->", onConfirmtxt.detail.value);
+  };
+  const onBlur = (onBlurtxt) => {
+    console.log("onBlurtxt--->", onBlurtxt.detail.value);
+    if (onBlurtxt.detail.value) {
+      setmarkText(onBlurtxt.detail.value);
+    }
+  };
+  const onInput = (onInputtxt) => {
+    console.log("onInputtxt--->", onInputtxt.detail.value);
+    if (onInputtxt.detail.value) {
+      setmarkText(onInputtxt.detail.value);
+    }
+  };
 
   const onBridgeReady = () => {
     WeixinJSBridge.call("hideOptionMenu");
   };
 
-  useEffect(() => {
-    // console.log("markTextStr=>", markTextStr);
-    // setmarkText(markTextStr);
-  }, []);
+  useEffect(() => {}, []);
 
   return (
     <View className="index">
-      <View dangerouslySetInnerHTML={{ __html: markTextStr }}></View>
+      <View className="left">
+        <Textarea
+          style="background:#fff;width:100%;min-height:80px;padding:0 30rpx;"
+          autoHeight
+          autoFocus
+          focus
+          onConfirm={onConfirm}
+          // onBlur={onBlur}
+          onInput={onInput}
+          maxlength={-1}
+          showCount
+        />
+      </View>
+      {markText ? (
+        <View
+          className="right"
+          dangerouslySetInnerHTML={{ __html: marked(markText) }}
+        ></View>
+      ) : null}
+      <View className="origin">
+        <OriginMark markText={markText} />
+      </View>
     </View>
   );
 };

src/pages/index/index.scss

@@ -1,13 +1,34 @@
+html,
+body {
+  user-select: auto;
+}
 .index {
-// font-size: 28px;
+  // font-size: 28px;
+  user-select: auto;
+  font-size: 16px;
+  display: flex;
+  flex-direction: row;
+  // align-items: center;
+  // justify-content: space-between;
+  padding: 30px;
 
-.payBtn{
-  // font-size: 30px;
-  margin-left: 20px;
-  top: 10px;
-}
+  .left {
+    width: 30%;
+    min-height: 500px;
+    // background-color: yellow;
+    border: 1px solid red;
+    padding: 20px;
+  }
 
-.lastWord{
-  font-size: 25px;
-}
+  .right {
+    flex: 1;
+    border: 1px solid red;
+    padding: 20px;
+  }
+
+  .origin{
+    flex: 1;
+    border: 1px solid red;
+    // padding: 20px;
+  }
 }