feat: add data handle

client/api/getView.ts

@@ -11,10 +11,10 @@ export interface View {
 }
 
 export default class getView {
-  static getViewComponent(params: {
-    props: Record<string, any>,
-    need: string
-  }) {
+    static getViewComponent(params: { props: Record<string, any>; need: string }) {
         return backendApi.post('/openAi/api/reactLive', params);
     }
+    static getViewFunction(params: { data: Record<string, any>; need: string }) {
+        return backendApi.post('/openAi/api/code', params);
+    }
 }

package.json

@@ -12,6 +12,7 @@
     "@arco-design/web-react": "^2.45.0",
     "@dbml/core": "^2.5.1",
     "@digitalocean/do-markdownit": "^1.9.0",
+    "@koale/useworker": "^4.0.2",
     "@microsoft/fetch-event-source": "^2.0.1",
     "@monaco-editor/react": "^4.4.5",
     "@next/font": "13.1.6",
@@ -45,6 +46,7 @@
     "react-hook-speech-to-text": "^0.8.0",
     "react-hotkeys-hook": "^4.3.7",
     "react-i18next": "^12.3.1",
+    "react-json-view": "^1.21.3",
     "react-live-runner": "^1.0.5",
     "reactflow": "^11.5.6",
     "redaxios": "^0.5.1",
@@ -53,8 +55,7 @@
     "swr": "^2.0.3",
     "tailwindcss": "^3.2.7",
     "typescript": "4.9.5",
-    "unstated-next": "^1.1.0",
-    "wasm-jseval": "^0.1.2"
+    "unstated-next": "^1.1.0"
   },
   "resolutions": {
     "postcss": "^8.4.14"
@@ -65,5 +66,10 @@
   },
   "engines": {
     "node": "18"
+  },
+  "browser": {
+    "fs": false,
+    "os": false,
+    "path": false
   }
 }
\ No newline at end of file

pages/actions/View/chatView.tsx

-import { Button, Card, Spin } from '@arco-design/web-react';
+import { Button, Card, Collapse, Spin } from '@arco-design/web-react';
 import { IconCode, IconEye, IconRefresh, IconSend, IconSwap } from '@arco-design/web-react/icon';
-import React, { ReactElement, memo, useCallback, useMemo, useRef, useState } from 'react';
+import React, {
+    ReactElement,
+    memo,
+    useCallback,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+} from 'react';
 import {
     LiveEditor,
     LiveError,
@@ -16,8 +24,17 @@ import AI from '@/components/AITool';
 import useSWRMutation from 'swr/mutation';
 import getView from '@/client/api/getView';
 import { nanoid } from 'nanoid';
-import { get } from 'lodash';
+import { get, isEqual } from 'lodash';
 import { useTranslation } from 'react-i18next';
+import Editor, { Monaco, useMonaco, OnMount } from '@monaco-editor/react';
+import { XML } from '@/utils/getXMLContent';
+import { useWorker } from '@koale/useworker';
+import dynamic from 'next/dynamic';
+const ReactJson = dynamic(() => import('react-json-view'), { ssr: false });
+
+const CollapseItem = Collapse.Item;
+
+type MonacoEditor = Parameters<OnMount>[0];
 
 function Error() {
     const { error } = useLiveContext();
@@ -27,7 +44,7 @@ function Error() {
 
 export function ChatView({
     defaultNode,
-    props,
+    props: propsRaw,
 }: {
     defaultNode?: ReactElement;
     props: Record<string, any>;
@@ -35,6 +52,12 @@ export function ChatView({
     const [showCode, setShowCode] = useState(true);
     const reqRef = useRef(nanoid());
     const [showTable, setShowTable] = useState(false);
+    const [props, setProps] = useState(propsRaw);
+
+    useEffect(() => {
+        setProps(propsRaw);
+    }, [propsRaw]);
+
     const { trigger, data, isMutating } = useSWRMutation(reqRef.current, (_, { arg: { need } }) => {
         return getView.getViewComponent({
             props,
@@ -100,8 +123,122 @@ export function ChatView({
         );
     }, [example, props, showCode]);
 
+    const [editor, setEditor] = useState<MonacoEditor>();
+    const monaco = useMonaco();
+    const [workerFn, { status: workerStatus, kill: workerTerminate }] = useWorker(
+        (data, code) => {
+            return new Function('data', code)(data);
+        },
+        {
+            autoTerminate: false,
+        }
+    );
+    console.log(workerStatus, 'workerStatus');
+
+    const onKeyDown = editor?.onKeyDown!;
+    const KeyDownEvent = useRef<ReturnType<typeof onKeyDown>>();
+
+    useEffect(() => {
+        if (editor) {
+            if (KeyDownEvent.current) {
+                KeyDownEvent.current.dispose();
+            }
+            KeyDownEvent.current = editor.onKeyDown(function (event: any) {
+                if (event.keyCode === 2 && monaco) {
+                    const position = editor.getPosition();
+                    const line = editor.getModel()?.getLineContent(position!.lineNumber) || '';
+                    const flag = /^\/\//;
+                    if (flag.test(line)) {
+                        // 在当前行后面提示“生成中”占位符
+                        const position = editor.getPosition()!;
+                        const lineNumber = position.lineNumber;
+                        const column = position.column;
+                        const insertText = ' 代码生成中，请稍后...';
+                        const op = {
+                            range: new monaco.Range(lineNumber, column, lineNumber, column),
+                            text: insertText,
+                        };
+                        editor.executeEdits('insertSnippet', [op]);
+
+                        getView
+                            .getViewFunction({
+                                data: props,
+                                need: line.replace(flag, ''),
+                            })
+                            .then((data: any) => {
+                                const code = get(data, 'data.code');
+                                const xml = new XML(code);
+                                const insertText = xml.get('FunctionCode');
+
+                                const nextLineNumber = lineNumber + 1;
+                                console.log(insertText);
+                                const op1 = {
+                                    range: new monaco.Range(
+                                        lineNumber,
+                                        0,
+                                        lineNumber,
+                                        column + insertText.length
+                                    ),
+                                    text: line,
+                                };
+                                const op2 = {
+                                    range: new monaco.Range(nextLineNumber, 1, nextLineNumber, 1),
+                                    text: insertText.trim() + '\n\n',
+                                };
+
+                                editor.executeEdits('insertSnippet', [op1, op2]);
+                            });
+                    }
+                }
+            });
+        }
+    }, [editor, props]);
+
     return (
         <div>
+            <div className="w-full mb-[20px]">
+                <Collapse style={{ maxWidth: 1180 }}>
+                    <CollapseItem
+                        header="数据处理"
+                        name="1"
+                        extra={
+                            <Button
+                                onClick={async () => {
+                                    const data = await workerFn(
+                                        propsRaw,
+                                        `${editor.getValue()};\n return handler(data);`
+                                    );
+                                    console.log(data);
+                                    setProps(data);
+                                }}
+                                type="primary"
+                                size="mini"
+                            >
+                                Run
+                            </Button>
+                        }
+                    >
+                        <Editor
+                            onMount={(instance, monaco) => {
+                                console.log(instance);
+                                setEditor(instance);
+                            }}
+                            height="300px"
+                            defaultLanguage="javascript"
+                            defaultValue={`/**
+ * @description 处理数据的函数
+ * @param  record<string,any> data
+ */
+
+function handler(data){
+    return data
+}
+
+`}
+                        />
+                    </CollapseItem>
+                </Collapse>
+            </div>
             <div className="flex justify-between items-center mb-[20px]">
                 <AI
                     simpleMode="input"
@@ -137,8 +274,10 @@ export function ChatView({
                         </div>
                         <div className="overflow-hidden">{Live}</div>
                     </div>
-                ) : (
+                ) : isEqual(props, propsRaw) ? (
                     defaultNode || null
+                ) : (
+                    <ReactJson src={props} />
                 )}
             </Spin>
         </div>

pages/index.tsx

@@ -10,7 +10,6 @@ import Link from 'next/link';
 import { useTranslation, Trans } from 'react-i18next';
 
 function Home() {
-    const { data } = useSWR('getTableList', () => getSchema.getTableList({ type: 'schema' }));
     const { t } = useTranslation();
     return (
         <>

pnpm-lock.yaml

@@ -17,6 +17,9 @@ dependencies:
   '@digitalocean/do-markdownit':
     specifier: ^1.9.0
     version: 1.9.0
+  '@koale/useworker':
+    specifier: ^4.0.2
+    version: 4.0.2(react@18.2.0)
   '@microsoft/fetch-event-source':
     specifier: ^2.0.1
     version: 2.0.1
@@ -116,6 +119,9 @@ dependencies:
   react-i18next:
     specifier: ^12.3.1
     version: 12.3.1(i18next@22.5.0)(react-dom@18.2.0)(react@18.2.0)
+  react-json-view:
+    specifier: ^1.21.3
+    version: 1.21.3(@types/react@18.0.27)(react-dom@18.2.0)(react@18.2.0)
   react-live-runner:
     specifier: ^1.0.5
     version: 1.0.5(react-dom@18.2.0)(react@18.2.0)
@@ -143,9 +149,6 @@ dependencies:
   unstated-next:
     specifier: ^1.1.0
     version: 1.1.0
-  wasm-jseval:
-    specifier: ^0.1.2
-    version: 0.1.2
 
 devDependencies:
   postcss:
@@ -1914,6 +1917,15 @@ packages:
       '@jridgewell/sourcemap-codec': 1.4.14
     dev: false
 
+  /@koale/useworker@4.0.2(react@18.2.0):
+    resolution: {integrity: sha512-xPIPADtom8/3/4FLNj7MvNcBM/Z2FleH85Fdx2O869eoKW8+PoEgtSVvoxWjCWMA46Sm9A5/R1TyzNGc+yM0wg==}
+    peerDependencies:
+      react: ^16.8.0
+    dependencies:
+      dequal: 1.0.1
+      react: 18.2.0
+    dev: false
+
   /@microsoft/fetch-event-source@2.0.1:
     resolution: {integrity: sha512-W6CLUJ2eBMw3Rec70qrsEW0jOm/3twwJv21mrmj2yORiaVmVYGS4sSS5yUwvQc1ZlDLYGPnClVWmUUMagKNsfA==}
     dev: false
@@ -2628,6 +2640,10 @@ packages:
       get-intrinsic: 1.2.0
     dev: false
 
+  /asap@2.0.6:
+    resolution: {integrity: sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==}
+    dev: false
+
   /ast-types-flow@0.0.7:
     resolution: {integrity: sha512-eBvWn1lvIApYMhzQMsu9ciLfkBY499mFZlNqG+/9WR7PVlroQw0vG30cOQQbaKz3sCEc44TAOu2ykzqXSNnwag==}
     dev: false
@@ -2712,6 +2728,10 @@ packages:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
     dev: false
 
+  /base16@1.0.0:
+    resolution: {integrity: sha512-pNdYkNPiJUnEhnfXV56+sQy8+AaPcG3POZAUnwr4EeqCUZFz4u2PePbo3e5Gj4ziYPCWGUZT9RHisvJKnwFuBQ==}
+    dev: false
+
   /binary-extensions@2.2.0:
     resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
     engines: {node: '>=8'}
@@ -2873,6 +2893,14 @@ packages:
       browserslist: 4.21.5
     dev: false
 
+  /cross-fetch@3.1.8:
+    resolution: {integrity: sha512-cvA+JwZoU0Xq+h6WkMvAUqPEYy92Obet6UdKLfW60qn99ftItKjB5T+BkyWOFWe2pUyfQ+IJHmpOTznqk1M6Kg==}
+    dependencies:
+      node-fetch: 2.6.12
+    transitivePeerDependencies:
+      - encoding
+    dev: false
+
   /cross-spawn@7.0.3:
     resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
     engines: {node: '>= 8'}
@@ -3078,6 +3106,11 @@ packages:
     resolution: {integrity: sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q==}
     dev: false
 
+  /dequal@1.0.1:
+    resolution: {integrity: sha512-Fx8jxibzkJX2aJgyfSdLhr9tlRoTnHKrRJuu2XHlAgKioN2j19/Bcbe0d4mFXYZ3+wpE2KVobUVTfDutcD17xQ==}
+    engines: {node: '>=6'}
+    dev: false
+
   /detect-node-es@1.1.0:
     resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
     dev: false
@@ -3624,6 +3657,32 @@ packages:
       reusify: 1.0.4
     dev: false
 
+  /fbemitter@3.0.0:
+    resolution: {integrity: sha512-KWKaceCwKQU0+HPoop6gn4eOHk50bBv/VxjJtGMfwmJt3D29JpN4H4eisCtIPA+a8GVBam+ldMMpMjJUvpDyHw==}
+    dependencies:
+      fbjs: 3.0.5
+    transitivePeerDependencies:
+      - encoding
+    dev: false
+
+  /fbjs-css-vars@1.0.2:
+    resolution: {integrity: sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ==}
+    dev: false
+
+  /fbjs@3.0.5:
+    resolution: {integrity: sha512-ztsSx77JBtkuMrEypfhgc3cI0+0h+svqeie7xHbh1k/IKdcydnvadp/mUaGgjAOXQmQSxsqgaRhS3q9fy+1kxg==}
+    dependencies:
+      cross-fetch: 3.1.8
+      fbjs-css-vars: 1.0.2
+      loose-envify: 1.4.0
+      object-assign: 4.1.1
+      promise: 7.3.1
+      setimmediate: 1.0.5
+      ua-parser-js: 1.0.35
+    transitivePeerDependencies:
+      - encoding
+    dev: false
+
   /file-entry-cache@6.0.1:
     resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
     engines: {node: ^10.12.0 || >=12.0.0}
@@ -3658,6 +3717,18 @@ packages:
     resolution: {integrity: sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==}
     dev: false
 
+  /flux@4.0.4(react@18.2.0):
+    resolution: {integrity: sha512-NCj3XlayA2UsapRpM7va6wU1+9rE5FIL7qoMcmxWHRzbp0yujihMBm9BBHZ1MDIk5h5o2Bl6eGiCe8rYELAmYw==}
+    peerDependencies:
+      react: ^15.0.2 || ^16.0.0 || ^17.0.0
+    dependencies:
+      fbemitter: 3.0.0
+      fbjs: 3.0.5
+      react: 18.2.0
+    transitivePeerDependencies:
+      - encoding
+    dev: false
+
   /focus-lock@0.11.6:
     resolution: {integrity: sha512-KSuV3ur4gf2KqMNoZx3nXNVhqCkn42GuTYCX4tXPEwf0MjpFQmNMiN6m7dXaUXgIoivL6/65agoUMg4RLS0Vbg==}
     engines: {node: '>=10'}
@@ -4247,10 +4318,18 @@ packages:
       p-locate: 5.0.0
     dev: false
 
+  /lodash.curry@4.1.1:
+    resolution: {integrity: sha512-/u14pXGviLaweY5JI0IUzgzF2J6Ne8INyzAZjImcryjgkZ+ebruBxy2/JaOOkTqScddcYtakjhSaeemV8lR0tA==}
+    dev: false
+
   /lodash.debounce@4.0.8:
     resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==}
     dev: false
 
+  /lodash.flow@3.5.0:
+    resolution: {integrity: sha512-ff3BX/tSioo+XojX4MOsOMhJw0nZoUEF011LX8g8d3gvjVbxd89cCio4BCXronjxcTUIJUoqKEUA+n4CqvvRPw==}
+    dev: false
+
   /lodash.merge@4.6.2:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
     dev: false
@@ -4411,6 +4490,18 @@ packages:
       - babel-plugin-macros
     dev: false
 
+  /node-fetch@2.6.12:
+    resolution: {integrity: sha512-C/fGU2E8ToujUivIO0H+tpQ6HWo4eEmchoPIoXtxCrVghxdKq+QOHqEZW7tuP3KlV3bC8FRMO5nMCC7Zm1VP6g==}
+    engines: {node: 4.x || >=6.0.0}
+    peerDependencies:
+      encoding: ^0.1.0
+    peerDependenciesMeta:
+      encoding:
+        optional: true
+    dependencies:
+      whatwg-url: 5.0.0
+    dev: false
+
   /node-releases@2.0.10:
     resolution: {integrity: sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w==}
     dev: false
@@ -5104,6 +5195,12 @@ packages:
     engines: {node: '>=6'}
     dev: false
 
+  /promise@7.3.1:
+    resolution: {integrity: sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==}
+    dependencies:
+      asap: 2.0.6
+    dev: false
+
   /prop-types@15.8.1:
     resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
     dependencies:
@@ -5117,6 +5214,10 @@ packages:
     engines: {node: '>=6'}
     dev: false
 
+  /pure-color@1.3.0:
+    resolution: {integrity: sha512-QFADYnsVoBMw1srW7OVKEYjG+MbIa49s54w1MA1EDY6r2r/sTcKKYqRX1f4GYvnXP7eN/Pe9HFcX+hwzmrXRHA==}
+    dev: false
+
   /queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
     dev: false
@@ -5126,6 +5227,15 @@ packages:
     engines: {node: '>=10'}
     dev: false
 
+  /react-base16-styling@0.6.0:
+    resolution: {integrity: sha512-yvh/7CArceR/jNATXOKDlvTnPKPmGZz7zsenQ3jUwLzHkNUR0CvY3yGYJbWJ/nnxsL8Sgmt5cO3/SILVuPO6TQ==}
+    dependencies:
+      base16: 1.0.0
+      lodash.curry: 4.1.1
+      lodash.flow: 3.5.0
+      pure-color: 1.3.0
+    dev: false
+
   /react-clientside-effect@1.2.6(react@18.2.0):
     resolution: {integrity: sha512-XGGGRQAKY+q25Lz9a/4EPqom7WRjz3z9R2k4jhVKA/puQFH/5Nt27vFZYql4m4NVNdUvX8PS3O7r/Zzm7cjUlg==}
     peerDependencies:
@@ -5239,6 +5349,27 @@ packages:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
     dev: false
 
+  /react-json-view@1.21.3(@types/react@18.0.27)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-13p8IREj9/x/Ye4WI/JpjhoIwuzEgUAtgJZNBJckfzJt1qyh24BdTm6UQNGnyTq9dapQdrqvquZTo3dz1X6Cjw==}
+    peerDependencies:
+      react: ^17.0.0 || ^16.3.0 || ^15.5.4
+      react-dom: ^17.0.0 || ^16.3.0 || ^15.5.4
+    dependencies:
+      flux: 4.0.4(react@18.2.0)
+      react: 18.2.0
+      react-base16-styling: 0.6.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-lifecycles-compat: 3.0.4
+      react-textarea-autosize: 8.5.1(@types/react@18.0.27)(react@18.2.0)
+    transitivePeerDependencies:
+      - '@types/react'
+      - encoding
+    dev: false
+
+  /react-lifecycles-compat@3.0.4:
+    resolution: {integrity: sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==}
+    dev: false
+
   /react-live-runner@1.0.5(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-+CqpxJSXED0yM/6zOr+AscckL4y9H4ikxeOmE6GMZIakl8yInBWq0Gj3oe/puFvIq1RyoiJwCcN6wWOk3K6gJQ==}
     peerDependencies:
@@ -5273,6 +5404,20 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
+  /react-textarea-autosize@8.5.1(@types/react@18.0.27)(react@18.2.0):
+    resolution: {integrity: sha512-3GdXBRT2m12xqH7ysRUquzFZYasYQrH/I+BofmT9sdMG5oI+GNfrsiTV1MvZGk3DLmZ72OUCiV5XGMEPKJ7Pog==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      '@babel/runtime': 7.20.13
+      react: 18.2.0
+      use-composed-ref: 1.3.0(react@18.2.0)
+      use-latest: 1.2.1(@types/react@18.0.27)(react@18.2.0)
+    transitivePeerDependencies:
+      - '@types/react'
+    dev: false
+
   /react-transition-group@4.4.5(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==}
     peerDependencies:
@@ -5481,6 +5626,10 @@ packages:
       lru-cache: 6.0.0
     dev: false
 
+  /setimmediate@1.0.5:
+    resolution: {integrity: sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==}
+    dev: false
+
   /shallowequal@1.1.0:
     resolution: {integrity: sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==}
     dev: false
@@ -5772,6 +5921,10 @@ packages:
       is-number: 7.0.0
     dev: false
 
+  /tr46@0.0.3:
+    resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
+    dev: false
+
   /ts-interface-checker@0.1.13:
     resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
     dev: false
@@ -5833,6 +5986,10 @@ packages:
     hasBin: true
     dev: false
 
+  /ua-parser-js@1.0.35:
+    resolution: {integrity: sha512-fKnGuqmTBnIE+/KXSzCn4db8RTigUzw1AN0DmdU6hJovUTbYJKyqj+8Mt1c4VfRDnOVJnENmfYkIPZ946UrSAA==}
+    dev: false
+
   /uc.micro@1.0.6:
     resolution: {integrity: sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==}
     dev: false
@@ -5905,6 +6062,41 @@ packages:
       tslib: 2.5.0
     dev: false
 
+  /use-composed-ref@1.3.0(react@18.2.0):
+    resolution: {integrity: sha512-GLMG0Jc/jiKov/3Ulid1wbv3r54K9HlMW29IWcDFPEqFkSO2nS0MuefWgMJpeHQ9YJeXDL3ZUF+P3jdXlZX/cQ==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      react: 18.2.0
+    dev: false
+
+  /use-isomorphic-layout-effect@1.1.2(@types/react@18.0.27)(react@18.2.0):
+    resolution: {integrity: sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.0.27
+      react: 18.2.0
+    dev: false
+
+  /use-latest@1.2.1(@types/react@18.0.27)(react@18.2.0):
+    resolution: {integrity: sha512-xA+AVm/Wlg3e2P/JiItTziwS7FK92LWrDB0p+hgXloIMuVCeJJ8v6f0eeHyPZaJrM+usM1FkFfbNCrJGs8A/zw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.0.27
+      react: 18.2.0
+      use-isomorphic-layout-effect: 1.1.2(@types/react@18.0.27)(react@18.2.0)
+    dev: false
+
   /use-sidecar@1.1.2(@types/react@18.0.27)(react@18.2.0):
     resolution: {integrity: sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==}
     engines: {node: '>=10'}
@@ -5937,8 +6129,15 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: false
 
-  /wasm-jseval@0.1.2:
-    resolution: {integrity: sha512-dYcNwXWU5H39j4kuS6n6uaanV9i+CXBRnwxEkrxI29RRg3YLSBNnwxS3LyavHv7MM0vYngnix3WUemeRHaxGBQ==}
+  /webidl-conversions@3.0.1:
+    resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
+    dev: false
+
+  /whatwg-url@5.0.0:
+    resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
+    dependencies:
+      tr46: 0.0.3
+      webidl-conversions: 3.0.1
     dev: false
 
   /which-boxed-primitive@1.0.2:

styles/globals.css

@@ -89,7 +89,11 @@ body[arco-theme=dark] {
   .view-lines,
   .decorationsOverviewRuler,
   .invisible {
-    background: rgb(233, 242, 241);
+    background: rgb(233, 242, 241,0.4);
+  }
+
+  .selected-text{
+background:rgba(255, 166, 0, 0.53) !important;
     }
 
   .slider.slider {

utils/getXMLContent.ts

+export class XML {
+    private root: HTMLDivElement;
+
+    constructor(code: string) {
+        this.root = document.createElement('div');
+        this.root.innerHTML = code;
+    }
+
+    get(code: string): string {
+        const insertText =
+            (this.root.querySelector('FunctionCode') as HTMLElement)?.outerText || '';
+        return insertText;
+    }
+}