component name

src/app.tsx

@@ -7,9 +7,9 @@ import { useState } from "react";
 import { functionBlockList } from "./data/functionBlocks";
 import ClickContextProvider from "./components/Selected/ClickContext";
 
-const code = (func: string) => `
+const code = (func: string,cpnName:string) => `
 ${func}
-render(cpn)
+render(${cpnName})
 `;
 
 const editor = (setShowEdit: React.Dispatch<React.SetStateAction<boolean>>) => {
@@ -31,11 +31,11 @@ const editor = (setShowEdit: React.Dispatch<React.SetStateAction<boolean>>) => {
               key={index}
             >
               <LiveEditor
-                code={code(func.code)}
+                code={code(func.code, func.cpnName)}
                 language={"tsx"}
                 onChange={(code) => {
                   functionBlockList[index].code = code
-                    .replace("render(cpn)", "")
+                    .replace(/render\(\s*([a-zA-Z_][a-zA-Z0-9_]*)\s*\)/g, "")
                     .trim();
                 }}
               />
@@ -44,8 +44,9 @@ const editor = (setShowEdit: React.Dispatch<React.SetStateAction<boolean>>) => {
                 className="bg-primary-6 text-white py-2 px-4 rounded-lg mt-2"
                 onClick={() => {
                   functionBlockList.splice(index + 1, 0, {
-                    code: "const cpn = () => {return <>Hello World</>};",
+                    code: "const NewComponent = () => {return <>Hello World</>};",
                     props: {},
+                    cpnName: "NewComponent",
                   });
                   setShowEdit(false);
                 }}
@@ -111,7 +112,7 @@ export const DemoApp = () => {
         )}
         {functionBlockList.map((func, index) => {
           return (
-            <LiveProvider code={code(func.code)} noInline key={index}>
+            <LiveProvider code={code(func.code, func.cpnName)} noInline key={index}>
               <ClickContextProvider
                 meun={[
                   {

src/components/Live/LiveProvider.tsx

@@ -28,7 +28,7 @@ function LiveProvider({
   disabled = false,
   scope,
   transformCode,
-  noInline = false,
+  noInline = true,
 }: PropsWithChildren<Props>) {
   const [state, setState] = useState<ProviderState>({
     error: undefined,

src/data/functionBlocks.ts

@@ -1,10 +1,11 @@
 export const functionBlockList: {
   code: string;
   props: Record<string, string>;
+  cpnName: string;
 }[] = [
   {
     code: `
-        const cpn = (props: {
+        const Banner = (props: {
           title: string
           subTitle: string
           btnText: string
@@ -38,10 +39,11 @@ export const functionBlockList: {
       subTitle: "让我们帮助您快速构建和优化您的网站",
       btnText: "立即开始",
     },
+    cpnName: "Banner",
   },
   {
     code: `
-        const cpn = (props: {
+        const Feature = (props: {
           title: string
           subTitle: string
           featureTitle1: string
@@ -101,10 +103,11 @@ export const functionBlockList: {
       featureTitle3: "个性化定制",
       featureDesc3: "提供多种定制选项，让您的网站独一无二",
     },
+    cpnName: "Feature",
   },
   {
     code: `
-        const cpn = (props: {
+        const Case = (props: {
           title: string
           subTitle: string
           caseTitle1: string
@@ -152,10 +155,11 @@ export const functionBlockList: {
       caseTitle2: "案例二",
       caseDesc2: "某设计师通过我们的平台轻松构建了一个个人作品展示网站",
     },
+    cpnName: "Case",
   },
   {
     code: `
-        const cpn = (props: {
+        const Review = (props: {
           title: string
           subTitle: string
           reviewUser1: string
@@ -203,10 +207,11 @@ export const functionBlockList: {
       reviewUser2: "用户B",
       reviewDesc2: "“非常容易使用，功能强大，效果出色！”",
     },
+    cpnName: "Review",
   },
   {
     code: `
-        const cpn = (props: {
+        const Faq = (props: {
           title: string
           subTitle: string
           faq1: string
@@ -266,10 +271,11 @@ export const functionBlockList: {
       faq3: "问题三：如何获取技术支持？",
       faqAnswer3: "您可以通过我们的客服系统或者发送邮件获取技术支持。",
     },
+    cpnName: "Faq",
   },
   {
     code: `
-        const cpn = (props: {
+        const Contant = (props: {
           title: string
           subTitle: string
         }) => {
@@ -291,5 +297,6 @@ export const functionBlockList: {
       title: "联系我们",
       subTitle: "如果您有任何疑问或需要帮助，请随时联系我们",
     },
+    cpnName: "Contant",
   },
 ];