test
This commit is contained in:
2288
package-lock.json
generated
2288
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -96,14 +96,18 @@
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"antd": "^5.17.2",
|
||||
"electron-debug": "^3.2.0",
|
||||
"electron-log": "^4.4.8",
|
||||
"electron-updater": "^6.1.4",
|
||||
"lodash": "^4.17.21",
|
||||
"marked": "^12.0.2",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^6.16.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@electron-forge/publisher-github": "^7.4.0",
|
||||
"@electron/notarize": "^2.1.0",
|
||||
"@electron/rebuild": "^3.3.0",
|
||||
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
|
||||
|
||||
@@ -1,62 +0,0 @@
|
||||
/*
|
||||
* @NOTE: Prepend a `~` to css file paths that are in your node_modules
|
||||
* See https://github.com/webpack-contrib/sass-loader#imports
|
||||
*/
|
||||
body {
|
||||
position: relative;
|
||||
color: white;
|
||||
height: 100vh;
|
||||
background: linear-gradient(
|
||||
200.96deg,
|
||||
#fedc2a -29.09%,
|
||||
#dd5789 51.77%,
|
||||
#7a2c9e 129.35%
|
||||
);
|
||||
font-family: sans-serif;
|
||||
overflow-y: hidden;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: white;
|
||||
padding: 10px 20px;
|
||||
border-radius: 10px;
|
||||
border: none;
|
||||
appearance: none;
|
||||
font-size: 1.3rem;
|
||||
box-shadow: 0px 8px 28px -6px rgba(24, 39, 75, 0.12),
|
||||
0px 18px 88px -4px rgba(24, 39, 75, 0.14);
|
||||
transition: all ease-in 0.1s;
|
||||
cursor: pointer;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
transform: scale(1.05);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
height: fit-content;
|
||||
width: fit-content;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
opacity: 1;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.Hello {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
@@ -1,50 +1,303 @@
|
||||
import { MemoryRouter as Router, Routes, Route } from 'react-router-dom';
|
||||
import icon from '../../assets/icon.svg';
|
||||
import './App.css';
|
||||
import { Component } from "react";
|
||||
import
|
||||
{ Input }
|
||||
from
|
||||
"antd"
|
||||
;
|
||||
// import Taro from "@tarojs/taro";
|
||||
// import {
|
||||
// View,
|
||||
// Text,
|
||||
// Image,
|
||||
// Button,
|
||||
// Input,
|
||||
// Editor,
|
||||
// Textarea,
|
||||
// } from "@tarojs/components";
|
||||
import "./APP.scss";
|
||||
// import { AtTabBar } from "taro-ui";
|
||||
import React, { useCallback, useEffect, useState } from "react";
|
||||
// import { AtGrid } from "taro-ui";
|
||||
// import { Swiper, SwiperItem } from "@tarojs/components";
|
||||
// import { AtCard } from "taro-ui";
|
||||
// import { AtImagePicker } from "taro-ui";
|
||||
// import { AtButton } from "taro-ui";
|
||||
// import { AtSearchBar } from "taro-ui";
|
||||
// import { Picker } from "@tarojs/components";
|
||||
// import { AtList, AtListItem } from "taro-ui";
|
||||
// import { AtNavBar } from "taro-ui";
|
||||
// import { AtModal, AtModalHeader, AtModalContent, AtModalAction } from "taro-ui";
|
||||
// import { AtToast } from "taro-ui";
|
||||
// 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";
|
||||
import TextArea from "antd/es/input/TextArea";
|
||||
|
||||
function Hello() {
|
||||
// marked.use(`marked-code-jsx-renderer`);
|
||||
// marked.use(`marked-extended-tables`);
|
||||
|
||||
// 
|
||||
|
||||
const markTextStr = `
|
||||
## 标题
|
||||
> 测试引用桔子的样子
|
||||
随便测试普通的文本,要不要来个\`内敛\`的字符串
|
||||
---
|
||||
- 无序列表1
|
||||
个人有看看
|
||||
- 无序列表2
|
||||
- [ ] 任务列表
|
||||
- [x] 完成任务
|
||||
1. 测试111
|
||||
恶魔女哪里的请
|
||||
2. 你好啊
|
||||
3. iefw4t43t43t
|
||||
永远不要相信一个
|
||||
---
|
||||
相信我
|
||||
`;
|
||||
|
||||
let tablecellArr = [];
|
||||
let tableRowArr = [];
|
||||
let maxLengthCell = null;
|
||||
let bodydata = null;
|
||||
let headerdata = null;
|
||||
let maxWidths = null;
|
||||
|
||||
marked.setOptions({
|
||||
breaks: true, // 是否回车换行
|
||||
gfm: true, //使用经批准的 GitHub Flavored Markdown (GFM) 规范
|
||||
// highlight(code:any, lang:any) {
|
||||
// // 语法高亮
|
||||
// let val = code;
|
||||
// if (lang) {
|
||||
// val = hljs.highlight(lang, code).value;
|
||||
// } else {
|
||||
// val = hljs.highlightAuto(code).value;
|
||||
// }
|
||||
// return val;
|
||||
// },
|
||||
});
|
||||
// 符号
|
||||
// 🔥❓👉
|
||||
// 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);
|
||||
// <div class="desc">${text}</div>
|
||||
return `<img width="300px" src="${href}" alt="${text}"/>`;
|
||||
};
|
||||
|
||||
|
||||
// let listSinbal="▫️ "
|
||||
let listSinbal="🔸"
|
||||
|
||||
// 有序列表
|
||||
renderer.list = function (body, ordered, start) {
|
||||
|
||||
// console.log("body,ordered, start", body, ordered, start);
|
||||
const type = ordered ? "ol" : "ul";
|
||||
// console.log("type===>", type);
|
||||
const startatt = ordered && start !== 1 ? ' start="' + start + '"' : "";
|
||||
// 正则取值
|
||||
// const regex = /▫️\s*(.*?)<br\/?>/g;
|
||||
const regex = /([^<]*)<br\/?>/g;
|
||||
const input = body;
|
||||
const matches = [...input.matchAll(regex)];
|
||||
const texts = matches.map((match) => match[1]);
|
||||
// 不含▫️的元素数量
|
||||
// const diffcCount=texts.length-texts.filter(item => item.includes('▫️')).length;
|
||||
// console.log("texts===>", texts); // 输出: ["测试111", "测试222", "if"]
|
||||
const newArray = texts.filter((item) => item.includes(listSinbal));
|
||||
// 0️⃣',
|
||||
const numbers = ["1️⃣", "2️⃣", "3️⃣", "4️⃣", "5️⃣", "6️⃣", "7️⃣", "8️⃣", "9️⃣", "🔟"];
|
||||
const string = texts
|
||||
.map((value, index) => {
|
||||
// console.log("value, index==>", value, index);
|
||||
// ${ value.indexOf("▫️ ") === -1 ? '<br/><span>111</sapn>' : ""}
|
||||
return value.indexOf(listSinbal) !== -1
|
||||
? `<div>${
|
||||
type === "ol" ? numbers[newArray.indexOf(value)] : listSinbal
|
||||
}${value.replace(listSinbal, "")} </div>`
|
||||
: `<div style="white-space:pre;">\t${value}</div>`;
|
||||
})
|
||||
.join("");
|
||||
// return `1️⃣`
|
||||
// console.log("string===>", string);
|
||||
|
||||
return `${string}`;
|
||||
};
|
||||
|
||||
// 无序列表 ▫️
|
||||
renderer.listitem = function (text, task, checked) {
|
||||
// return `<li>${text}</li>\n`;
|
||||
return `${listSinbal}${text}<br/>`
|
||||
// return `➖${text}<br/>`;
|
||||
;
|
||||
|
||||
};
|
||||
|
||||
// 任务列表
|
||||
renderer.checkbox = function (checked) {
|
||||
// ✅❌
|
||||
return !!checked ? "✅" : "❌";
|
||||
return (
|
||||
<div>
|
||||
<div className="Hello">
|
||||
<img width="200" alt="icon" src={icon} />
|
||||
"<input " + (checked ? 'checked="" ' : "") + 'disabled="" type="checkbox">'
|
||||
);
|
||||
};
|
||||
|
||||
// 标题
|
||||
renderer.heading = function (text, level, raw) {
|
||||
// ignore IDs
|
||||
// return `📋<span>${text}</span> <br/>`;
|
||||
return `🔥<span>${text}</span> <br/>`;
|
||||
// return `<h${level}>${text}</h${level}>\n`;
|
||||
};
|
||||
|
||||
// 分隔符
|
||||
renderer.hr = function () {
|
||||
// return '<hr>\n';
|
||||
return "➖➖➖➖➖<br/>";
|
||||
};
|
||||
|
||||
// 内联样式,使用直角引号「」
|
||||
renderer.codespan = function (text) {
|
||||
// return `「${text}」`;
|
||||
return `『${text}』`;
|
||||
};
|
||||
|
||||
// 引用符号
|
||||
renderer.blockquote = function (quote) {
|
||||
// console.log("quote", quote);
|
||||
var regex = /<p>(.*?)<\/p>/;
|
||||
var str = quote;
|
||||
var match = regex.exec(str);
|
||||
if (match != null) {
|
||||
let content = match[1]; // 获取第一个捕获组的内容
|
||||
// console.log(content);
|
||||
}
|
||||
// <pre></pre>
|
||||
//
|
||||
return `<span style="white-space:pre;" class="blockquote">\t 👉${content}</span><br/> `;
|
||||
};
|
||||
|
||||
renderer.table = function (header, body) {
|
||||
if (body) body = `<tbody>${body}</tbody>`;
|
||||
|
||||
return (
|
||||
"📊 表格 📊<br/><table>\n" +
|
||||
"<thead>\n" +
|
||||
header +
|
||||
"</thead>\n" +
|
||||
body +
|
||||
"</table>\n"
|
||||
);
|
||||
};
|
||||
|
||||
renderer.tablerow = function (content) {
|
||||
return `<tr>\n${content}</tr>\n`;
|
||||
};
|
||||
|
||||
|
||||
renderer.tablecell = function (content, flags) {
|
||||
const type = flags.header ? "th" : "td";
|
||||
const tag = flags.align ? `<${type} align="${flags.align}">` : `<${type}>`;
|
||||
return tag + `|${content}` + `</${type}>\n`;
|
||||
};
|
||||
|
||||
function cleanUrl(href:any) {
|
||||
try {
|
||||
href = encodeURI(href).replace(/%25/g, '%');
|
||||
} catch (e) {
|
||||
return null;
|
||||
}
|
||||
return href;
|
||||
}
|
||||
|
||||
renderer.link = function (href, title, text) {
|
||||
const cleanHref = cleanUrl(href);
|
||||
if (cleanHref === null) {
|
||||
return text;
|
||||
}
|
||||
href = cleanHref;
|
||||
let out = '<a href="' + href + '"';
|
||||
if (title) {
|
||||
out += ' title="' + title + '"';
|
||||
}
|
||||
out += ">" +`🌐`+ text + "</a>";
|
||||
// out += ">" +`🌐`+ text + "</a>"+`(${href})`;
|
||||
|
||||
return out;
|
||||
};
|
||||
|
||||
// 使用拓展
|
||||
marked.use({ renderer });
|
||||
|
||||
// export default class Index extends Component {
|
||||
const Index = () => {
|
||||
const [markText, setmarkText] = useState(``);
|
||||
const [oldmarkText, setoldmarkText] = useState(null);
|
||||
const [currentRender, setcurrentRender] = useState(null);
|
||||
const [markdownTable, setmarkdownTable] = useState();
|
||||
const [tablecellArr, settablecellArr] = useState([]);
|
||||
|
||||
const onConfirm = (onConfirmtxt:any) => {
|
||||
console.log("onConfirmtxt--->", onConfirmtxt.detail.value);
|
||||
};
|
||||
const onBlur = (onBlurtxt:any) => {
|
||||
console.log("onBlurtxt--->", onBlurtxt.detail.value);
|
||||
if (onBlurtxt.detail.value) {
|
||||
setmarkText(onBlurtxt.detail.value);
|
||||
}
|
||||
};
|
||||
const onInput = (onInputtxt:any) => {
|
||||
console.log("onInputtxt--->", onInputtxt);
|
||||
let value=onInputtxt?.target?.innerText
|
||||
if (value) {
|
||||
setmarkText(value);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
useEffect(() => {}, []);
|
||||
|
||||
return (
|
||||
<div className="index">
|
||||
|
||||
<div className="left">
|
||||
<TextArea
|
||||
// styles="background:#fff;width:100%;min-height:80px;padding:0 30rpx;"
|
||||
// autoHeight
|
||||
className="TextArea"
|
||||
autoFocus
|
||||
allowClear
|
||||
// focus
|
||||
// onConfirm={onConfirm}
|
||||
// onBlur={onBlur}
|
||||
onChange={onInput}
|
||||
// maxlength={-1}
|
||||
showCount
|
||||
/>
|
||||
</div>
|
||||
<h1>electron-react-boilerplate</h1>
|
||||
<div className="Hello">
|
||||
<a
|
||||
href="https://electron-react-boilerplate.js.org/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<button type="button">
|
||||
<span role="img" aria-label="books">
|
||||
📚
|
||||
</span>
|
||||
Read our docs
|
||||
</button>
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/sponsors/electron-react-boilerplate"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<button type="button">
|
||||
<span role="img" aria-label="folded hands">
|
||||
🙏
|
||||
</span>
|
||||
Donate
|
||||
</button>
|
||||
</a>
|
||||
{markText ? (
|
||||
<div
|
||||
className="right"
|
||||
dangerouslySetInnerHTML={{ __html: marked(markText) }}
|
||||
></div>
|
||||
) : null}
|
||||
<div className="origin">
|
||||
<OriginMark markText={markText} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Router>
|
||||
<Routes>
|
||||
<Route path="/" element={<Hello />} />
|
||||
</Routes>
|
||||
</Router>
|
||||
);
|
||||
}
|
||||
export default Index;
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"resolveJsonModule": true,
|
||||
"allowJs": true,
|
||||
"checkJs": false,
|
||||
"outDir": ".erb/dll"
|
||||
},
|
||||
"exclude": ["test", "release/build", "release/app/dist", ".erb/dll"]
|
||||
|
||||
Reference in New Issue
Block a user