From 63efd9e38a786d430f38e68295942db1e7cc97d8 Mon Sep 17 00:00:00 2001
From: chenchongqiang <chongqiangchen@gmail.com>
Date: Fri, 21 Apr 2023 01:13:17 +0800
Subject: [PATCH] feat(docusaurus-plugin): add simple mode

---
 .../src/theme/SoliveCodeBlock/index.tsx       | 60 +++++++++++++------
 1 file changed, 42 insertions(+), 18 deletions(-)

diff --git a/packages/docusaurus-plugin/src/theme/SoliveCodeBlock/index.tsx b/packages/docusaurus-plugin/src/theme/SoliveCodeBlock/index.tsx
index b18e5ab..b2ad6a8 100644
--- a/packages/docusaurus-plugin/src/theme/SoliveCodeBlock/index.tsx
+++ b/packages/docusaurus-plugin/src/theme/SoliveCodeBlock/index.tsx
@@ -11,6 +11,10 @@ import resolveMeta from '../utils/resolve-meta';
 import transformModel from '../utils/transform-model';
 
 const PropsInfo = {
+  simple: {
+    type: 'boolean',
+    default: false,
+  },
   width: {
     type: 'string',
     default: '90%',
@@ -47,30 +51,50 @@ const PropsInfo = {
 
 function SoliveCodeBlock(props: SoliveCodeBlockProps) {
   const { metastring, children } = props;
-  const allProps = matchProps(metastring?.split('solive')[1] || '', PropsInfo);
+  const allProps = useMemo(() => matchProps(metastring?.split('solive')[1] || '', PropsInfo), [metastring]);
 
   const id = useMemo(() => uuidv4(), []);
   const modelInfos = useMemo(() => transformModel(resolveMeta(children)), [children]);
 
+  const state = useMemo(() => {
+    if (allProps.simple) {
+      return {
+        height: allProps.height,
+        id,
+        modelInfos,
+        fileNav: { open: false },
+        console: { open: false },
+        deploy: { open: false },
+        disableValidation: true,
+      };
+    }
+
+    return {
+      fileNav: {
+        open: allProps.fileNavOpen,
+      },
+      console: {
+        defaultVisible: allProps.consoleDefaultVisible,
+        open: allProps.consoleOpen,
+        triggerControl: allProps.consoleTriggerControl,
+      },
+      deploy: {
+        defaultVisible: allProps.deployDefaultVisible,
+        open: allProps.deployOpen,
+      },
+      height: allProps.height,
+      id,
+      modelInfos,
+    };
+  }, [
+    allProps,
+    id,
+    modelInfos,
+  ]);
+
   return (
     <div style={{ width: allProps.width, maxWidth: '800px', margin: 'auto' }}>
-      <Editor
-        fileNav={{
-          open: allProps.fileNavOpen,
-        }}
-        console={{
-          defaultVisible: allProps.consoleDefaultVisible,
-          open: allProps.consoleOpen,
-          triggerControl: allProps.consoleTriggerControl,
-        }}
-        deploy={{
-          defaultVisible: allProps.deployDefaultVisible,
-          open: allProps.deployOpen,
-        }}
-        height={allProps.height}
-        id={id}
-        modelInfos={modelInfos}
-      />
+      <Editor {...state} />
     </div>
   );
 }