fix playground

packages/editor/src/components/ComponentForm/StyleTraitForm/StyleTraitForm.tsx

@@ -39,7 +39,7 @@ export const StyleTraitForm: React.FC<Props> = props => {
   }, [component]);
 
   const styleTrait = component.traits[styleTraitIndex];
-  const ddddddd = styleTrait?.properties.styles as Styles | undefined;
+  const styles = styleTrait?.properties.styles as Styles | undefined;
 
   const createStyleTrait = () => {
     eventBus.send(
@@ -76,12 +76,12 @@ export const StyleTraitForm: React.FC<Props> = props => {
   );
 
   const addStyle = useCallback(() => {
-    const newStyles: Styles = (ddddddd || []).concat({
+    const newStyles: Styles = (styles || []).concat({
       styleSlot: styleSlots[0],
       style: '',
     });
     updateStyles(newStyles);
-  }, [updateStyles, styleSlots, ddddddd]);
+  }, [updateStyles, styleSlots, styles]);
 
   const onClickCreate = () => {
     if (!styleTrait) {
@@ -93,33 +93,33 @@ export const StyleTraitForm: React.FC<Props> = props => {
 
   const changeStyleContent = useCallback(
     (i: number, value: string) => {
-      if (!ddddddd) return;
-      const newStyles = produce(ddddddd, draft => {
+      if (!styles) return;
+      const newStyles = produce(styles, draft => {
         draft[i].style = value;
       });
       updateStyles(newStyles);
     },
-    [updateStyles, ddddddd]
+    [updateStyles, styles]
   );
 
   const changeStyleSlot = useCallback(
     (i: number, newSlot: string) => {
-      if (!ddddddd) return;
-      const newStyles = produce(ddddddd, draft => {
+      if (!styles) return;
+      const newStyles = produce(styles, draft => {
         draft[i].styleSlot = newSlot;
       });
       updateStyles(newStyles);
     },
-    [updateStyles, ddddddd]
+    [updateStyles, styles]
   );
 
   const styleForms = useMemo(() => {
-    if (!ddddddd) {
+    if (!styles) {
       return null;
     }
-    return ddddddd.map(({ style, styleSlot }, i) => {
+    return styles.map(({ style, styleSlot }, i) => {
       const removeStyle = () => {
-        const newStyles = ddddddd.filter((_, j) => j !== i);
+        const newStyles = styles.filter((_, j) => j !== i);
         updateStyles(newStyles);
       };
       return (
@@ -150,7 +150,7 @@ export const StyleTraitForm: React.FC<Props> = props => {
         </VStack>
       );
     });
-  }, [ddddddd, styleSlots, updateStyles, changeStyleSlot, changeStyleContent]);
+  }, [styles, styleSlots, updateStyles, changeStyleSlot, changeStyleContent]);
 
   return (
     <VStack width="full">

packages/editor/src/components/PreviewModal/PreviewModal.tsx

@@ -1,5 +1,6 @@
 import { Box } from '@chakra-ui/react';
 import { Application } from '@sunmao-ui/core';
+import { sunmaoChakraUILib } from '@sunmao-ui/chakra-ui-lib';
 import { ImplementedRuntimeModule, initSunmaoUI } from '@sunmao-ui/runtime';
 import React from 'react';
 import ErrorBoundary from '../ErrorBoundary';
@@ -14,6 +15,7 @@ type Props = {
 export const PreviewModal: React.FC<Props> = ({ app, modules, onClose }) => {
   const { App, registry } = initSunmaoUI();
   modules.forEach(m => registry.registerModule(m));
+  sunmaoChakraUILib.components?.forEach(c => registry.registerComponent(c));
 
   return (
     <GeneralModal onClose={onClose} title="Preview Modal">

packages/editor/src/playground.tsx

@@ -16,12 +16,13 @@ type Example = {
   };
 };
 
-const { Editor, registry } = initSunmaoUIEditor();
-
-registry.installLib(sunmaoChakraUILib);
-
 const Playground: React.FC<{ examples: Example[] }> = ({ examples }) => {
   const [example, setExample] = useState<Example | null>(examples[0]);
+  const { Editor, registry } = initSunmaoUIEditor({
+    defaultApplication: example?.value.app,
+  });
+  registry.installLib(sunmaoChakraUILib);
+  example?.value.modules?.forEach(m => registry.registerModule(m));
 
   return (
     <Flex width="100vw" height="100vh">