eric/gitlab-instance-0a899031_linkwechat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
hackrobot
2024-05-15 18:54:31 +08:00
parent e3adf0e4d6
commit c5071ca4c1
1 changed files with 70 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

176
src/pages/index/index.jsx
View File

@@ -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);
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"
);
// return `${header}${body}`;
console.log(`📊 表格标题 📊<br/>${header}${body}`);
return `📊 表格标题 📊<br/>${header} |${'-'.repeat(maxLengthCell) }| --- | --- |<br/>${body} `;
};
// renderer.tablerow = function (content) {
// console.log("tablerow===>",content)
// return `<tr>\n${content}</tr>\n`;
// };
// 重写表格头部渲染函数
renderer.tablerow = function (content) {
// console.log(`|${content} <br/>\n`)
return `|${content} <br/>\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`;
// };
// 重写表格单元格渲染函数
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 (
<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>