update

src/pages/index/index.jsx

@@ -27,6 +27,9 @@ 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.setOptions({
   breaks: true, // 是否回车换行
   highlight(code, lang) {
@@ -46,18 +49,20 @@ marked.setOptions({
 // 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);
+  // console.log("href, title, text", href, title, text);
   // <div class="desc">${text}</div>
   return `<img width="300px"  src="${href}" alt="${text}"/>`;
 };
 
 // 有序列表
 renderer.list = function (body, ordered, start) {
-  console.log("body,ordered, start", body, ordered, start);
+  // console.log("body,ordered, start", body, ordered, start);
   const type = ordered ? "ol" : "ul";
-  console.log("type===>", type);
+  // console.log("type===>", type);
   const startatt = ordered && start !== 1 ? ' start="' + start + '"' : "";
   // 正则取值
   // const regex = /▫️\s*(.*?)<br\/?>/g;
@@ -67,13 +72,13 @@ renderer.list = function (body, ordered, start) {
   const texts = matches.map((match) => match[1]);
   // 不含▫️的元素数量
   // const diffcCount=texts.length-texts.filter(item => item.includes('▫️')).length;
-  console.log("texts===>", texts); // 输出: ["测试111", "测试222", "if"]
+  // console.log("texts===>", texts); // 输出: ["测试111", "测试222", "if"]
   const newArray = texts.filter((item) => item.includes("▫️"));
   // 0️⃣',
   const numbers = ["1️⃣", "2️⃣", "3️⃣", "4️⃣", "5️⃣", "6️⃣", "7️⃣", "8️⃣", "9️⃣", "🔟"];
   const string = texts
     .map((value, index) => {
-      console.log("value, index==>", value, index);
+      // console.log("value, index==>", value, index);
       // ${ value.indexOf("▫️ ") === -1 ? '<br/><span>111</sapn>' : ""}
       return value.indexOf("▫️ ") !== -1
         ? `<div>${
@@ -83,7 +88,7 @@ renderer.list = function (body, ordered, start) {
     })
     .join("");
   // return `1️⃣`
-  console.log("string===>", string);
+  // console.log("string===>", string);
 
   return `${string}`;
 };
@@ -123,23 +128,24 @@ renderer.codespan = function (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);
   }
   // <pre></pre>
   return `<span style="white-space:pre;" class="blockquote">\t👉${content}</span> `;
 };
 
+// 使用拓展
 marked.use({ renderer });
+
 // ![测试图片2](http://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/202304081955211.png)
 
-const markTextStr = marked(
-  `
+const markTextStr = `
   ## 标题
   > 测试引用桔子的样子
 随便测试普通的文本,要不要来个\`内敛\`的字符串
@@ -156,39 +162,40 @@ const markTextStr = marked(
    永远不要相信一个
    ---
    相信我
-   `
-);
-
+   `;
 
 // export default class Index extends Component {
 const Index = () => {
   const [markText, setmarkText] = useState(null);
+  const [oldmarkText, setoldmarkText] = useState(null);
+  const [currentRender, setcurrentRender] = useState(null);
 
-
-  const editorReady = (e) => {
-    Taro.createSelectorQuery()
-      .select("#editor")
-      .context((res) => {
-        this.editorCtx = res.context;
-      })
-      .exec();
-  };
-  
   const onConfirm = (onConfirmtxt) => {
-    console.log("onConfirmtxt--->",onConfirmtxt.detail.value);
+    console.log("onConfirmtxt--->", onConfirmtxt.detail.value);
   };
   const onBlur = (onBlurtxt) => {
     console.log("onBlurtxt--->", onBlurtxt.detail.value);
-    setmarkText(marked(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(marked(markTextStr));
+    // setmarkText(markTextStr);
+    setmarkText(null);
+
   }, []);
 
   return (
@@ -199,13 +206,19 @@ const Index = () => {
           autoHeight
           autoFocus
           onConfirm={onConfirm}
-          onBlur={onBlur}
+          // onBlur={onBlur}
+          onInput={onInput}
         />
       </View>
-      <View
-        className="right"
-        dangerouslySetInnerHTML={{ __html: markText }}
-      ></View>
+      {markText ? (
+        <View
+          className="right"
+          dangerouslySetInnerHTML={{ __html: marked(markText) }}
+        ></View>
+      ) : null}
+      <View className="origin">
+        <OriginMark markText={markText} />
+      </View>
     </View>
   );
 };

src/pages/index/index.scss

@@ -8,15 +8,27 @@ body {
   font-size: 16px;
   display: flex;
   flex-direction: row;
+  // align-items: center;
+  // justify-content: space-between;
   padding: 30px;
 
   .left {
-    width: 50%;
+    width: 30%;
     height: 500px;
     // background-color: yellow;
+    border: 1px solid red;
+    padding: 20px;
   }
 
   .right {
     flex: 1;
+    border: 1px solid red;
+    padding: 20px;
+  }
+
+  .origin{
+    flex: 1;
+    border: 1px solid red;
+    // padding: 20px;
   }
 }