From c5071ca4c13603f40433577fe473698a3beb5dc9 Mon Sep 17 00:00:00 2001 From: hackrobot Date: Wed, 15 May 2024 18:54:31 +0800 Subject: [PATCH] update --- src/pages/index/index.jsx | 176 +++++++++++++++----------------------- 1 file changed, 70 insertions(+), 106 deletions(-) diff --git a/src/pages/index/index.jsx b/src/pages/index/index.jsx index 5d702e3..b144a5f 100644 --- a/src/pages/index/index.jsx +++ b/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 `\t👉${content}
`; }; -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 + '
'); - } else { - // 否则，将行拆分成单元格，并去除两端的空白字符 - const cells = trimmedLine.split('|').slice(1, -1).map(cell => cell.trim()); - - // 将单元格拼接成一行Markdown表格行，并添加到markdownTable数组中 - markdownTable.push('| ' + cells.join(' | ') + ' |
'); - } - } - }); - - // 将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}
${body}==>',`${header}
${body}`) - - // 将表格头和体拼接成一个字符串返回 - return convertToMarkdownTable(input) - - if (body) body = `${body}`; - - return ( - "\n" + "\n" + header + "\n" + body + "
\n" - ); + // return `${header}${body}`; + console.log(`📊 表格标题 📊
${header}${body}`); + return `📊 表格标题 📊
${header} |${'-'.repeat(maxLengthCell) }| --- | --- |
${body} `; }; -// renderer.tablerow = function (content) { -// console.log("tablerow===>",content) -// return `\n${content}\n`; -// }; +// 重写表格头部渲染函数 +renderer.tablerow = function (content) { + // console.log(`|${content}
\n`) + return `|${content}
\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 + `\n`; -// }; +// 重写表格单元格渲染函数 +renderer.tablecell = function (content, flags) { + // 清除其他 HTML 标签，保留 - 和 | 字符 + content = content.replace(/<(?!br\/)[^>]*>?/gm, ""); + 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 [oldmarkText, setoldmarkText] = useState(null); - const [currentRender, setcurrentRender] = useState(null); - const [markdownTable, setmarkdownTable] = useState(` - | 11 | 12 | 13 | + const [markText, setmarkText] = useState(` + | 11 ww | 12ww | 13ww | | --- | --- | --- | | 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(() => { - setmarkText(null); - }, []); + useEffect(() => {}, []); return ( @@ -296,13 +267,6 @@ const Index = () => { dangerouslySetInnerHTML={{ __html: marked(markText) }} > ) : null} - - {markdownTable ? ( - - ) : null}