update

src/pages/index/index.jsx

@@ -30,6 +30,33 @@ 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 maxLengthCell=null
+
 marked.setOptions({
   breaks: true, // 是否回车换行
   gfm: true, //使用经批准的 GitHub Flavored Markdown (GFM) 规范
@@ -44,7 +71,6 @@ marked.setOptions({
     return val;
   },
 });
-
 // 符号
 // 🔥❓👉
 // 0️⃣1️⃣2️⃣3️⃣4️⃣5️⃣6️⃣7️⃣8️⃣9️⃣🔟
@@ -141,115 +167,62 @@ renderer.blockquote = function (quote) {
   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);
+  // return `${header}${body}`;
-  console.log(" body===", body);
+  console.log(`📊 表格标题 📊<br/>${header}${body}`);
-  console.log('input==>',convertToMarkdownTable(input))
+  return `📊 表格标题 📊<br/>${header} |${'-'.repeat(maxLengthCell) }| --- | --- |<br/>${body} `;
-  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)
+renderer.tablerow = function (content) {
-//   return `<tr>\n${content}</tr>\n`;
+  // console.log(`|${content} <br/>\n`)
-// };
+  return `|${content} <br/>\n`;
+};
 
-// renderer.tablecell = function (content, flags) {
+// 重写表格单元格渲染函数
-//   console.log("tablecell,flags===>",content)
+renderer.tablecell = function (content, flags) {
-//   const type = flags.header ? "th" : "td";
+  // 清除其他 HTML 标签，保留 - 和 | 字符
-//   const tag = flags.align ? `<${type} align="${flags.align}">` : `<${type}>`;
+  content = content.replace(/<(?!br\/)[^>]*>?/gm, "");
-//   return tag + content + `</${type}>\n`;
+  console.log(`${content} | `);
-// };
+  // 添加到数组,并计算最大的字符长度
+  tablecellArr.push(content);
+  console.log("tablecellArr", tablecellArr);
+  const longestString = tablecellArr.reduce(
+    (acc, cur) => {
+      // 获取当前字符串的长度
+      const curLength = cur.length;
+      // 如果当前字符串的长度大于之前记录的最大长度，则更新最大长度和字符串
+      if (curLength > acc.maxLength) {
+        acc.maxLength = curLength;
+        acc.longestString = cur;
+      }
+
+      return acc;
+    },
+    { maxLength: 0, longestString: "" }
+  );
+  // console.log("最长的字符串：", longestString.longestString);
+  // console.log("长度值：", longestString.maxLength);
+  maxLengthCell= longestString.maxLength
+  return `${content} | `;
+};
 
 // 使用拓展
 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)
-
-const markTextStr = `
-  ## 标题
-  > 测试引用桔子的样子
-随便测试普通的文本,要不要来个\`内敛\`的字符串
-   ---
-   - 无序列表1
-   个人有看看
-  - 无序列表2
-   - [ ] 任务列表
-   - [x] 完成任务
-   1. 测试111
-   恶魔女哪里的请
-   2. 你好啊
-   3. iefw4t43t43t
-   永远不要相信一个
-   ---
-   相信我
-   `;
 
 // export default class Index extends Component {
 const Index = () => {
-  const [markText, setmarkText] = useState(null);
+  const [markText, setmarkText] = useState(`
-  const [oldmarkText, setoldmarkText] = useState(null);
+  | 11 ww | 12ww | 13ww |
-  const [currentRender, setcurrentRender] = useState(null);
-  const [markdownTable, setmarkdownTable] = useState(`
-  | 11  | 12 | 13 |
   | --- | --- | --- |
   | 21 | 22 | 23  |
   | 31  | 32   | 33  |
-  | 41   | 42   | 43  |
+  | 41   | 42   | 4333333  |
   `);
+  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);
@@ -271,9 +244,7 @@ const Index = () => {
     WeixinJSBridge.call("hideOptionMenu");
   };
 
-  useEffect(() => {
+  useEffect(() => {}, []);
-    setmarkText(null);
-  }, []);
 
   return (
     <View className="index">
@@ -296,13 +267,6 @@ 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>