update

src/pages/index/index.jsx

@@ -32,6 +32,7 @@ import OriginMark from "./conpoments/OriginMark/index";
 
 marked.setOptions({
   breaks: true, // 是否回车换行
+  gfm: true, //使用经批准的 GitHub Flavored Markdown (GFM) 规范
   highlight(code, lang) {
     //  语法高亮
     let val = code;
@@ -118,7 +119,7 @@ renderer.heading = function (text, level, raw) {
 // 分隔符
 renderer.hr = function () {
   // return '<hr>\n';
-  return "<br/>➖➖➖➖➖<br/>";
+  return "➖➖➖➖➖<br/>";
 };
 
 // 内联样式,使用直角引号「」
@@ -137,11 +138,84 @@ renderer.blockquote = function (quote) {
     // console.log(content);
   }
   // <pre></pre>
-  return `<span style="white-space:pre;" class="blockquote">\t👉${content}</span> `;
+  return `<span style="white-space:pre;" class="blockquote">\t👉${content}</span><br/> `;
 };
 
+function convertToMarkdownTable(input) {
+  // 将输入字符串按行分割成数组
+  const lines = input.split('\n');
+
+  // 定义一个数组来存储Markdown表格的每一行
+  const markdownTable = [];
+
+  // 迭代处理每一行
+  lines.forEach((line, index) => {
+      // 去除行两端的空白字符
+      const trimmedLine = line.trim();
+
+      // 如果行不为空，则处理该行
+      if (trimmedLine !== '') {
+          // 如果是表头行，则直接添加到markdownTable数组中
+          if (index === 0) {
+              markdownTable.push(trimmedLine + ' <br/>');
+          } else {
+              // 否则，将行拆分成单元格，并去除两端的空白字符
+              const cells = trimmedLine.split('|').slice(1, -1).map(cell => cell.trim());
+
+              // 将单元格拼接成一行Markdown表格行，并添加到markdownTable数组中
+              markdownTable.push('| ' + cells.join(' | ') + ' |<br/>');
+          }
+      }
+  });
+
+  // 将markdownTable数组中的内容拼接成一个字符串，并返回
+  return markdownTable.join('\n');
+}
+
+// 示例用法
+const input = `  | 11  | 12 | 13 |
+| --- | --- | --- |
+| 21 | 22 | 23  |
+| 31  | 32   | 33  |
+| 41   | 42   | 43  |`;
+console.log(convertToMarkdownTable(input));
+
+
+
+
+
+renderer.table = function (header, body) {
+  console.log("header, ===", header);
+  console.log(" body===", body);
+  console.log('input==>',convertToMarkdownTable(input))
+  console.log('${header}<br/>${body}==>',`${header}<br/>${body}`)
+
+  // 将表格头和体拼接成一个字符串返回
+  return convertToMarkdownTable(input)
+
+  if (body) body = `<tbody>${body}</tbody>`;
+
+  return (
+    "<table>\n" + "<thead>\n" + header + "</thead>\n" + body + "</table>\n"
+  );
+};
+
+// renderer.tablerow = function (content) {
+//   console.log("tablerow===>",content)
+//   return `<tr>\n${content}</tr>\n`;
+// };
+
+// renderer.tablecell = function (content, flags) {
+//   console.log("tablecell,flags===>",content)
+//   const type = flags.header ? "th" : "td";
+//   const tag = flags.align ? `<${type} align="${flags.align}">` : `<${type}>`;
+//   return tag + content + `</${type}>\n`;
+// };
+
 // 使用拓展
 marked.use({ renderer });
+// marked.use(`marked-code-jsx-renderer`);
+// marked.use(`marked-extended-tables`);
 
 // ![测试图片2](http://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/202304081955211.png)
 
@@ -169,22 +243,28 @@ const Index = () => {
   const [markText, setmarkText] = useState(null);
   const [oldmarkText, setoldmarkText] = useState(null);
   const [currentRender, setcurrentRender] = useState(null);
+  const [markdownTable, setmarkdownTable] = useState(`
+  | 11  | 12 | 13 |
+  | --- | --- | --- |
+  | 21 | 22 | 23  |
+  | 31  | 32   | 33  |
+  | 41   | 42   | 43  |
+  `);
 
   const onConfirm = (onConfirmtxt) => {
     console.log("onConfirmtxt--->", onConfirmtxt.detail.value);
   };
   const onBlur = (onBlurtxt) => {
     console.log("onBlurtxt--->", onBlurtxt.detail.value);
-    if(onBlurtxt.detail.value){
+    if (onBlurtxt.detail.value) {
       setmarkText(onBlurtxt.detail.value);
     }
   };
   const onInput = (onInputtxt) => {
     console.log("onInputtxt--->", onInputtxt.detail.value);
-    if(onInputtxt.detail.value){
+    if (onInputtxt.detail.value) {
       setmarkText(onInputtxt.detail.value);
     }
-
   };
 
   const onBridgeReady = () => {
@@ -192,10 +272,7 @@ const Index = () => {
   };
 
   useEffect(() => {
-    // console.log("markTextStr=>", markTextStr);
-    // setmarkText(markTextStr);
     setmarkText(null);
-
   }, []);
 
   return (
@@ -205,9 +282,12 @@ const Index = () => {
           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 ? (
@@ -216,6 +296,13 @@ const Index = () => {
           dangerouslySetInnerHTML={{ __html: marked(markText) }}
         ></View>
       ) : null}
+
+      {markdownTable ? (
+        <View
+          className="right"
+          dangerouslySetInnerHTML={{ __html: marked(markdownTable) }}
+        ></View>
+      ) : null}
       <View className="origin">
         <OriginMark markText={markText} />
       </View>

src/pages/index/index.scss

@@ -14,7 +14,7 @@ body {
 
   .left {
     width: 30%;
-    height: 500px;
+    min-height: 500px;
     // background-color: yellow;
     border: 1px solid red;
     padding: 20px;