impl style trait form

packages/editor/src/components/CodeEditor/CssEditor.tsx

@@ -0,0 +1,63 @@
+import React, { useEffect, useRef } from 'react';
+import CodeMirror from 'codemirror';
+import { Box } from '@chakra-ui/react';
+import { css } from '@emotion/react';
+import 'codemirror/mode/css/css';
+import 'codemirror/addon/fold/brace-fold';
+import 'codemirror/addon/fold/foldgutter';
+import 'codemirror/addon/fold/foldgutter.css';
+import 'codemirror/lib/codemirror.css';
+import 'codemirror/theme/ayu-mirage.css';
+
+export const CssEditor: React.FC<{
+  defaultCode: string;
+  onChange?: (v: string) => void;
+  onBlur?: (v: string) => void;
+}> = ({ defaultCode, onChange, onBlur }) => {
+  const style = css`
+    .CodeMirror {
+      width: 100%;
+      height: 120px;
+    }
+  `;
+
+  const wrapperEl = useRef<HTMLDivElement>(null);
+  const cm = useRef<CodeMirror.Editor | null>(null);
+  useEffect(() => {
+    if (!wrapperEl.current) {
+      return;
+    }
+    if (!cm.current) {
+      cm.current = CodeMirror(wrapperEl.current, {
+        value: defaultCode,
+        mode: {
+          name: 'css',
+        },
+        foldGutter: true,
+        lineWrapping: true,
+        lineNumbers: false,
+        gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
+        foldOptions: {
+          widget: () => {
+            return '\u002E\u002E\u002E';
+          },
+        },
+        theme: 'ayu-mirage',
+      });
+    }
+    const changeHandler = (instance: CodeMirror.Editor) => {
+      onChange?.(instance.getValue());
+    };
+    const blurHandler = (instance: CodeMirror.Editor) => {
+      onBlur?.(instance.getValue());
+    };
+    cm.current.on('change', changeHandler);
+    cm.current.on('blur', blurHandler);
+    return () => {
+      cm.current?.off('change', changeHandler);
+      cm.current?.off('blur', blurHandler);
+    };
+  }, [defaultCode]);
+
+  return <Box css={style} ref={wrapperEl}></Box>;
+};

packages/editor/src/components/CodeEditor/index.ts

@@ -1,2 +1,3 @@
 export * from './StateEditor';
 export * from './SchemaEditor';
+export * from './CssEditor';

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

@@ -13,6 +13,7 @@ import SchemaField from './JsonSchemaForm/SchemaField';
 import { genOperation } from '../../operations';
 import { editorStore } from '../../EditorStore';
 import { observer } from 'mobx-react-lite';
+import { StyleTraitForm } from './StyleTraitForm';
 
 type Props = {
   registry: Registry;
@@ -138,6 +139,7 @@ export const ComponentForm: React.FC<Props> = observer(props => {
       </VStack>
       <EventTraitForm component={selectedComponent} registry={registry} />
       <FetchTraitForm component={selectedComponent} registry={registry} />
+      <StyleTraitForm component={selectedComponent} registry={registry} />
       <GeneralTraitFormList component={selectedComponent} registry={registry} />
     </VStack>
   );

packages/editor/src/components/ComponentForm/GeneralTraitFormList/AddTraitButton.tsx

@@ -2,6 +2,7 @@ import { AddIcon, ChevronDownIcon } from '@chakra-ui/icons';
 import { IconButton, Menu, MenuButton, MenuItem, MenuList } from '@chakra-ui/react';
 import { Registry } from '@sunmao-ui/runtime/lib/services/registry';
 import { useMemo } from 'react';
+import { ignoreTraitsList } from 'src/constants';
 
 type Props = {
   registry: Registry;
@@ -12,7 +13,7 @@ export const AddTraitButton: React.FC<Props> = props => {
   const { onAddTrait, registry } = props;
 
   const traitTypes = useMemo(() => {
-    return registry.getAllTraitTypes();
+    return registry.getAllTraitTypes().filter(type => !ignoreTraitsList.includes(type));
   }, []);
 
   const menuItems = traitTypes.map(type => {

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

@@ -0,0 +1,62 @@
+import { useMemo } from 'react';
+import { FormControl, FormLabel, VStack, Box } from '@chakra-ui/react';
+import { ApplicationComponent } from '@sunmao-ui/core';
+import { Registry } from '@sunmao-ui/runtime';
+import { CssEditor } from '../../../components/CodeEditor';
+import { eventBus } from '../../../eventBus';
+import { genOperation } from '../../../operations';
+
+type Props = {
+  registry: Registry;
+  component: ApplicationComponent;
+};
+
+export const StyleTraitForm: React.FC<Props> = props => {
+  const { component, registry } = props;
+
+  const styleSlots = useMemo(() => {
+    return registry.getComponentByType(component.type).spec.styleSlots;
+  }, [component, registry]);
+  const styles = useMemo(() => {
+    return component.traits.filter(t => t.type === 'core/v1/style');
+  }, [component]);
+
+  if (!styleSlots.length) {
+    return null;
+  }
+
+  return (
+    <VStack width="full">
+      <Box fontWeight="bold" textAlign="left" width="100%">
+        Styles
+      </Box>
+      {styleSlots.map(styleSlot => {
+        const styleTrait = styles.find(s => s.properties.styleSlot === styleSlot);
+        if (!styleTrait) {
+          return null;
+        }
+        return (
+          <FormControl id={styleSlot} key={styleSlot}>
+            <FormLabel>{styleSlot}</FormLabel>
+            <CssEditor
+              defaultCode={styleTrait.properties.style as string}
+              onBlur={v =>
+                eventBus.send(
+                  'operation',
+                  genOperation('modifyTraitProperty', {
+                    componentId: component.id,
+                    traitIndex: component.traits.indexOf(styleTrait),
+                    properties: {
+                      styleSlot,
+                      style: v,
+                    },
+                  })
+                )
+              }
+            />
+          </FormControl>
+        );
+      })}
+    </VStack>
+  );
+};

packages/editor/src/components/ComponentForm/StyleTraitForm/index.ts

@@ -0,0 +1 @@
+export * from './StyleTraitForm';

packages/editor/src/constants.ts

@@ -1,7 +1,12 @@
 import { Application } from '@sunmao-ui/core';
 import { ImplementedRuntimeModule } from '@sunmao-ui/runtime';
 
-export const ignoreTraitsList = ['core/v1/slot', 'core/v1/event', 'core/v1/fetch'];
+export const ignoreTraitsList = [
+  'core/v1/slot',
+  'core/v1/event',
+  'core/v1/fetch',
+  'core/v1/style',
+];
 
 export const EmptyAppSchema: Application = {
   kind: 'Application',