update

src/renderer/App.tsx

@@ -1,5 +1,6 @@
-import { Component } from 'react';
+import { Component, useRef } from 'react';
 import { Input } from 'antd';
+import { Button, Flex } from 'antd'
 // import Taro from "@tarojs/taro";
 // import {
 //   View,
@@ -37,32 +38,6 @@ import TextArea from 'antd/es/input/TextArea';
 
 // ![测试图片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 tableRowArr = [];
-let maxLengthCell = null;
-let bodydata = null;
-let headerdata = null;
-let maxWidths = null;
-
 marked.setOptions({
   breaks: true, // 是否回车换行
   gfm: true, //使用经批准的 GitHub Flavored Markdown (GFM) 规范
@@ -121,6 +96,7 @@ renderer.list = function (body, ordered, start) {
   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);
@@ -173,7 +149,6 @@ renderer.hr = function () {
   // return '<hr>\n';
   // return '➖➖➖➖➖<br/>';
   return '➖➖➖➖➖';
-
 };
 
 // 自定义分隔线解析规则
@@ -253,7 +228,6 @@ renderer.link = function (href, title, text) {
 renderer.paragraph = function (text) {
   return `<p>${text}</p>\n`;
   // return `<p>${text}</p>`;
-
 };
 renderer.br = function () {
   return '<br>';
@@ -267,6 +241,7 @@ marked.use({ renderer });
 
 // export default class Index extends Component {
 const Index = () => {
+  const divRef = useRef(null);
   const [inputValue, setinputValue] = useState('');
   const [markText, setmarkText] = useState(``);
 
@@ -296,31 +271,58 @@ const Index = () => {
 
   useEffect(() => {}, []);
 
+  const copyToClipboard = () => {
+    if (divRef.current) {
+      // const htmlContent = divRef.current.innerHTML;
+      // const htmlContent = divRef.current.outerHTML;
+      const htmlContent = divRef.current.innerText;
+
+      navigator.clipboard
+        .writeText(htmlContent)
+        .then(() => {
+          // alert('Content copied to clipboard!');
+        })
+        .catch((err) => {
+          console.error('Error copying text: ', err);
+        });
+    }
+  };
+
   return (
     <div className="index">
-      <div className="left">
-        <TextArea
-          // styles="background:#fff;width:100%;min-height:80px;padding:0 30rpx;"
-          className="TextArea"
-          autoFocus
-          allowClear
-          onChange={onInput}
-          showCount
-        />
+      <div className="up">
+        <div className="upLeft">
+          {/* <button onClick={copyToClipboard}>Copy to Clipboardl</button> */}
+        </div>
+        <div className="upRight">
+          {/* <button onClick={copyToClipboard}>Copy to Clipboarrd</button> */}
+          {/* <Button type="primary" onClick={copyToClipboard}>复制</Button> */}
+          <Button onClick={copyToClipboard}>复制</Button>
+        </div>
       </div>
-      <div className="right">
-        <div className="rightHtml" dangerouslySetInnerHTML={{ __html: marked(markText) }}></div>
-      </div>
-
-      {/* {markText ? (
-        <div
-          className="right"
-          dangerouslySetInnerHTML={{ __html: marked(markText) }}
-        ></div>
-      ) : null} */}
-      {/* <div className="origin">
+      <div className="down">
+        {' '}
+        <div className="left">
+          <TextArea
+            // styles="background:#fff;width:100%;min-height:80px;padding:0 30rpx;"
+            className="TextArea"
+            autoFocus
+            allowClear
+            onChange={onInput}
+            showCount
+          />
+        </div>
+        <div className="right">
+          <div
+            className="rightHtml"
+            ref={divRef}
+            dangerouslySetInnerHTML={{ __html: marked(markText) }}
+          ></div>
+        </div>
+        {/* <div className="origin">
         <OriginMark markText={markText} />
       </div> */}
+      </div>
     </div>
   );
 };