lots of updates

packages/client/package.json

@@ -21,9 +21,11 @@
     "@formily/antd": "^2.0.0-beta.72",
     "@formily/core": "^2.0.0-beta.72",
     "@formily/react": "^2.0.0-beta.72",
+    "@monaco-editor/react": "^4.2.1",
     "ahooks": "^2.10.2",
     "axios": "^0.21.1",
     "beautiful-react-hooks": "^0.35.0",
+    "constate": "^3.3.0",
     "lodash": "^4.17.21",
     "react-dnd": "^14.0.2",
     "react-dnd-html5-backend": "^14.0.0",

packages/client/src/blocks/DesignableSchemaField/index.tsx

@@ -171,7 +171,7 @@ export function useDesignable(path?: any) {
   const currentSchema = findPropertyByPath(schema, schemaPath);
   console.log('useDesignable', { schema, schemaPath, currentSchema });
   return {
-    schema: currentSchema,
+    schema: (currentSchema || {} as any),
     refresh,
     prepend: (property: ISchema, targetPath?: any): Schema => {
       let target = currentSchema;
@@ -263,6 +263,7 @@ export function useDesignable(path?: any) {
           return;
         }
         s.parent.removeProperty(s.name);
+        console.log('s.parent.properties', s.name, s.parent.properties)
         if (Object.keys(s.parent.properties || {}).length === 0) {
           remove(s.parent);
         }
@@ -297,6 +298,7 @@ export function useSchemaPath() {
     path.unshift(parent.name);
     parent = parent.parent;
   }
+  console.log('useSchemaPath', path, schema);
   return [...path];
 }
 
@@ -335,7 +337,7 @@ const CodePreview = ({ schema }) => {
   return (
     <>
       <CodeOutlined onClick={() => setVisible(true)} />
-      <Modal width={'80%'} onCancel={() => setVisible(false)} visible={visible}>
+      <Modal width={'50%'} onCancel={() => setVisible(false)} visible={visible}>
         <Editor
           height="60vh"
           defaultLanguage="json"
@@ -347,6 +349,11 @@ const CodePreview = ({ schema }) => {
   );
 };
 
+export const SchemaField = createSchemaField({
+  scope,
+  components,
+});
+
 export const DesignableSchemaField = createDesignableSchemaField({
   scope,
   components,

packages/client/src/blocks/SchemaField.tsx

@@ -1,137 +0,0 @@
-import React, { createContext, useState } from 'react';
-import {
-  // FormItem,
-  FormLayout,
-  FormButtonGroup,
-  Submit,
-  ArrayTable,
-  ArrayCollapse,
-} from '@formily/antd';
-import { createForm } from '@formily/core';
-import {
-  Schema,
-  ISchema,
-  useForm,
-  FormProvider,
-  createSchemaField,
-  observer,
-  useFieldSchema,
-} from '@formily/react';
-import { Space, Card } from 'antd';
-import { Action, useLogin, useRegister, useSubmit } from './action';
-import { AddNew } from './add-new';
-import { Cascader } from './cascader';
-import { Checkbox } from './checkbox';
-import { ColorSelect } from './color-select';
-import { DatabaseField } from './database-field';
-import { DatePicker } from './date-picker';
-import { DrawerSelect } from './drawer-select';
-import { Filter } from './filter';
-import { Form } from './form';
-import { Grid } from './grid';
-import { IconPicker } from './icon-picker';
-import { Input } from './input';
-import { InputNumber } from './input-number';
-import { Markdown } from './markdown';
-import { Menu } from './menu';
-import { Password } from './password';
-import { Radio } from './radio';
-import { Select } from './select';
-import { Table } from './table';
-import { Tabs } from './tabs';
-import { TimePicker } from './time-picker';
-import { Upload } from './upload';
-import { FormItem } from './form-item';
-
-export const BlockContext = createContext({ dragRef: null });
-
-const Div = (props) => <div {...props} />;
-
-export const scope = {
-  useLogin,
-  useRegister,
-  useSubmit,
-};
-
-export const components = {
-  Div,
-  Space,
-  Card,
-
-  ArrayCollapse,
-  ArrayTable,
-  FormLayout,
-  FormItem,
-
-  Action,
-  AddNew,
-  Cascader,
-  Checkbox,
-  ColorSelect,
-  DatabaseField,
-  DatePicker,
-  DrawerSelect,
-  Filter,
-  Form,
-  Grid,
-  IconPicker,
-  Input,
-  InputNumber,
-  Markdown,
-  Menu,
-  Password,
-  Radio,
-  Select,
-  Table,
-  Tabs,
-  TimePicker,
-  Upload,
-};
-
-export function registerScope(scopes) {
-  Object.keys(scopes).forEach((key) => {
-    scope[key] = scopes[key];
-  });
-}
-
-export function registerComponents(values) {
-  Object.keys(values).forEach((key) => {
-    components[key] = values[key];
-  });
-}
-
-export const SchemaField = createSchemaField({
-  scope,
-  components,
-});
-
-export const DesignableSchemaContext = createContext<Schema>(new Schema({}));
-export const RefreshDesignableSchemaContext = createContext(null);
-
-export function DesignableProvider(props) {
-  const { schema } = props;
-  const [, refresh] = useState(0);
-  return (
-    <RefreshDesignableSchemaContext.Provider
-      value={() => {
-        refresh(Math.random());
-      }}
-    >
-      <DesignableSchemaContext.Provider value={schema}>
-        {props.children(schema)}
-      </DesignableSchemaContext.Provider>
-      {/* <pre>{JSON.stringify(schema.toJSON(), null, 2)}</pre> */}
-    </RefreshDesignableSchemaContext.Provider>
-  );
-}
-
-export const DesignableContext =
-  createContext<{ schema: Schema; refresh: any }>(null);
-
-export function DesignableSchemaField(props: { schema?: ISchema }) {
-  return (
-    <DesignableProvider schema={new Schema(props.schema)}>
-      {(s) => <SchemaField schema={s} />}
-    </DesignableProvider>
-  );
-}

packages/client/src/blocks/action/index.md

@@ -5,8 +5,8 @@ nav:
   path: /client
 group:
   order: 1
-  title: 区块 - Blocks
+  title: Components - 组件
-  path: /client/blocks
+  path: /client/components
 ---
 
 # Action - 操作

packages/client/src/blocks/add-new/index.md

@@ -5,8 +5,8 @@ nav:
   path: /client
 group:
   order: 1
-  title: 区块 - Blocks
+  title: Components - 组件
-  path: /client/blocks
+  path: /client/components
 ---
 
 # AddNew - 新增区块
@@ -15,7 +15,7 @@ group:
 
 ```tsx
 import React from 'react';
-import { SchemaBlock } from '../';
+import { SchemaRenderer } from '../';
 
 const schema = {
   type: 'void',
@@ -24,7 +24,7 @@ const schema = {
 };
 
 export default () => {
-  return <SchemaBlock schema={schema} />
+  return <SchemaRenderer schema={schema} />
 }
 ```
 
@@ -32,7 +32,7 @@ export default () => {
 
 ```tsx
 import React from 'react';
-import { SchemaBlock } from '../';
+import { SchemaRenderer } from '../';
 
 const schema = {
   type: 'void',
@@ -41,6 +41,6 @@ const schema = {
 };
 
 export default () => {
-  return <SchemaBlock schema={schema} />
+  return <SchemaRenderer schema={schema} />
 }
 ```

packages/client/src/blocks/add-new/index.tsx

@@ -43,13 +43,53 @@ import {
   DownOutlined,
   DatabaseOutlined,
 } from '@ant-design/icons';
+import { useDesignable, useSchemaPath } from '../DesignableSchemaField';
+import { uid } from '@formily/shared';
 
 export const AddNew: any = observer((props) => {
+  const { schema, insertBefore } = useDesignable();
+  const path = useSchemaPath();
+  if (schema.parent['x-component'] === 'Grid.Block') {
+    path.pop(); // block
+    path.pop(); // col
+    path.pop(); // row
+  }
   return (
     <Dropdown
       overlay={
         <Menu>
-          <Menu.Item>新建 Markdown</Menu.Item>
+          <Menu.Item
+            onClick={() => {
+              insertBefore({
+                type: 'void',
+                name: uid(),
+                "x-component": 'Grid.Row',
+                properties: {
+                  [uid()]: {
+                    type: 'void',
+                    "x-component": 'Grid.Col',
+                    properties: {
+                      [uid()]: {
+                        type: 'void',
+                        "x-component": 'Grid.Block',
+                        properties: {
+                          [uid()]: {
+                            type: 'void',
+                            title: uid(),
+                            'x-designable-bar': 'FormItem.DesignableBar',
+                            "x-decorator": 'FormItem',
+                            'x-component': 'Markdown',
+                          }
+                        }
+                      },
+                    },
+                  },
+                },
+              }, [...path]);
+            }}
+          >
+            新建 Markdown
+          </Menu.Item>
         </Menu>
       }
     >
@@ -59,11 +99,49 @@ export const AddNew: any = observer((props) => {
 });
 
 AddNew.FormItem = observer((props) => {
+  const { schema, insertBefore } = useDesignable();
+  const path = useSchemaPath();
+  if (schema.parent['x-component'] === 'Grid.Block') {
+    path.pop(); // block
+    path.pop(); // col
+    path.pop(); // row
+  }
   return (
     <Dropdown
       overlay={
         <Menu>
-          <Menu.Item>字段 1</Menu.Item>
+          <Menu.Item
+            onClick={() => {
+              insertBefore({
+                type: 'void',
+                name: uid(),
+                "x-component": 'Grid.Row',
+                properties: {
+                  [uid()]: {
+                    type: 'void',
+                    "x-component": 'Grid.Col',
+                    properties: {
+                      [uid()]: {
+                        type: 'void',
+                        "x-component": 'Grid.Block',
+                        properties: {
+                          [uid()]: {
+                            type: 'void',
+                            title: uid(),
+                            'x-designable-bar': 'FormItem.DesignableBar',
+                            "x-decorator": 'FormItem',
+                            'x-component': 'Markdown',
+                          }
+                        }
+                      },
+                    },
+                  },
+                },
+              }, [...path]);
+            }}
+          >
+            字段 1
+          </Menu.Item>
         </Menu>
       }
     >

packages/client/src/blocks/cascader/index.md

@@ -5,8 +5,8 @@ nav:
   path: /client
 group:
   order: 1
-  title: 区块 - Blocks
+  title: Components - 组件
-  path: /client/blocks
+  path: /client/components
 ---
 
 # Cascader - 级联选择

packages/client/src/blocks/checkbox/index.md

@@ -5,8 +5,8 @@ nav:
   path: /client
 group:
   order: 1
-  title: 区块 - Blocks
+  title: Components - 组件
-  path: /client/blocks
+  path: /client/components
 ---
 
 # Checkbox - 多选框

packages/client/src/blocks/color-select/index.md

@@ -5,8 +5,8 @@ nav:
   path: /client
 group:
   order: 1
-  title: 区块 - Blocks
+  title: Components - 组件
-  path: /client/blocks
+  path: /client/components
 ---
 
 # ColorSelect - 颜色选择器

packages/client/src/blocks/database-field/index.md

@@ -5,8 +5,8 @@ nav:
   path: /client
 group:
   order: 1
-  title: 区块 - Blocks
+  title: Components - 组件
-  path: /client/blocks
+  path: /client/components
 ---
 
 # DatabaseField - 数据表字段

packages/client/src/blocks/date-picker/index.md

@@ -5,8 +5,8 @@ nav:
   path: /client
 group:
   order: 1
-  title: 区块 - Blocks
+  title: Components - 组件
-  path: /client/blocks
+  path: /client/components
 ---
 
 # DatePicker - 日期选择器

packages/client/src/blocks/drawer-select/index.md

@@ -5,8 +5,8 @@ nav:
   path: /client
 group:
   order: 1
-  title: 区块 - Blocks
+  title: Components - 组件
-  path: /client/blocks
+  path: /client/components
 ---
 
 # DrawerSelect - 抽屉选择器

packages/client/src/blocks/filter/FilterItem.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo, useState } from 'react';
-import { getFieldComponent, SchemaField } from '../';
+import { SchemaField } from '../';
 import { createForm, onFieldChange, onFieldReact } from '@formily/core'
 import { FormProvider, FormConsumer } from '@formily/react'
 import { Field } from '@formily/core/esm/models/Field';
@@ -51,7 +51,7 @@ export const FilterItem = (props) => {
             } else {
               field.visible = true;
             }
-            field.setComponent(getFieldComponent(schema['x-component']));
+            // field.setComponent(getFieldComponent(schema['x-component']));
             // field.visible = opValue ? !opValue.noValue : true;
           });
         },

packages/client/src/blocks/filter/index.md

@@ -5,6 +5,6 @@ nav:
   path: /client
 group:
   order: 1
-  title: 区块 - Blocks
+  title: Components - 组件
-  path: /client/blocks
+  path: /client/components
 ---

packages/client/src/blocks/form-item/index.tsx

@@ -8,6 +8,7 @@ import './style.less';
 import get from 'lodash/get';
 import { GridBlockContext } from '../grid';
 import { uid } from '@formily/shared';
+import { useDesignable } from '../DesignableSchemaField';
 
 function Blank() {
   return null;
@@ -36,6 +37,7 @@ export const FormItem: any = connect((props) => {
 
 FormItem.DesignableBar = () => {
   const field = useField();
+  const { schema, refresh } = useDesignable();
   const [visible, setVisible] = useState(false);
   const { dragRef } = useContext(GridBlockContext);
   return (
@@ -58,8 +60,11 @@ FormItem.DesignableBar = () => {
             <Menu>
               <Menu.Item
                 onClick={(e) => {
-                  field.title = uid();
+                  const title = uid();
+                  schema.title = title;
+                  field.title = title;
                   setVisible(false);
+                  refresh();
                 }}
               >
                 点击修改按钮文案

packages/client/src/blocks/form/ActionBar.tsx

@@ -1,53 +0,0 @@
-import React, { useState } from 'react';
-import classNames from 'classnames';
-import { useField, observer, RecursionField, Schema } from '@formily/react';
-import { Dropdown, Menu } from 'antd';
-import { useSchemaQuery } from '../grid';
-import {
-  MenuOutlined,
-  ArrowUpOutlined,
-  ArrowDownOutlined,
-  DeleteOutlined,
-} from '@ant-design/icons';
-
-export const ActionBar = (props) => {
-  const { addBlock, removeBlock } = useSchemaQuery();
-  const [active, setActive] = useState(false);
-  return (
-    <>
-      <Menu.Item
-        onClick={() => {
-          addBlock(
-            {},
-            {
-              insertBefore: true,
-            },
-          );
-          setActive(false);
-        }}
-        icon={<ArrowUpOutlined />}
-      >
-        在上方插入区块
-      </Menu.Item>
-      <Menu.Item
-        onClick={() => {
-          addBlock();
-          setActive(false);
-        }}
-        icon={<ArrowDownOutlined />}
-      >
-        在下方插入区块
-      </Menu.Item>
-      <Menu.Divider />
-      <Menu.Item
-        onClick={() => {
-          removeBlock();
-          setActive(false);
-        }}
-        icon={<DeleteOutlined />}
-      >
-        删除区块
-      </Menu.Item>
-    </>
-  );
-};

packages/client/src/blocks/form/index.md

@@ -5,8 +5,8 @@ nav:
   path: /client
 group:
   order: 1
-  title: 区块 - Blocks
+  title: Components - 组件
-  path: /client/blocks
+  path: /client/components
 ---
 
 # Form - 表单
@@ -17,7 +17,7 @@ group:
 
 ```tsx
 import React from 'react';
-import { SchemaBlock } from '../';
+import { SchemaRenderer } from '../';
 
 const schema = {
   type: 'object',
@@ -47,7 +47,7 @@ const schema = {
 
 export default () => {
   return (
-    <SchemaBlock schema={schema} />
+    <SchemaRenderer schema={schema} />
   );
 };
 ```
@@ -56,7 +56,7 @@ export default () => {
 
 ```tsx
 import React from 'react';
-import { SchemaBlock } from '../';
+import { SchemaRenderer } from '../';
 
 const schema = {
   type: 'void',
@@ -257,7 +257,7 @@ const schema = {
 
 export default () => {
   return (
-    <SchemaBlock schema={schema} />
+    <SchemaRenderer schema={schema} />
   );
 };
 ```
@@ -266,7 +266,7 @@ export default () => {
 
 ```tsx
 import React from 'react';
-import { SchemaBlock } from '../';
+import { SchemaRenderer } from '../';
 import { uid } from '@formily/shared';
 
 const schema = {
@@ -302,6 +302,7 @@ const schema = {
                       type: 'string',
                       required: true,
                       title: '字段1',
+                      'x-designable-bar': 'FormItem.DesignableBar',
                       'x-decorator': 'FormItem',
                       'x-component': 'Input',
                     },
@@ -329,6 +330,7 @@ const schema = {
                       type: 'string',
                       required: true,
                       title: '字段2',
+                      'x-designable-bar': 'FormItem.DesignableBar',
                       'x-decorator': 'FormItem',
                       'x-component': 'Input',
                     },
@@ -361,6 +363,7 @@ const schema = {
                       type: 'string',
                       required: true,
                       title: '字段3',
+                      'x-designable-bar': 'FormItem.DesignableBar',
                       'x-decorator': 'FormItem',
                       'x-component': 'Input',
                     },
@@ -388,6 +391,7 @@ const schema = {
                       type: 'string',
                       required: true,
                       title: '字段4',
+                      'x-designable-bar': 'FormItem.DesignableBar',
                       'x-decorator': 'FormItem',
                       'x-component': 'Input',
                     },
@@ -423,6 +427,7 @@ const schema = {
                       type: 'string',
                       required: true,
                       title: '字段5',
+                      'x-designable-bar': 'FormItem.DesignableBar',
                       'x-decorator': 'FormItem',
                       'x-component': 'Input',
                     },
@@ -496,7 +501,7 @@ const schema = {
 
 export default () => {
   return (
-    <SchemaBlock schema={schema} />
+    <SchemaRenderer schema={schema} />
   );
 };
 ```

packages/client/src/blocks/form/index.tsx

@@ -1,23 +1,29 @@
 import React, { useMemo } from 'react';
 import { createForm } from '@formily/core';
-import { FormProvider, useFieldSchema } from '@formily/react';
+import { FormProvider, Schema, useFieldSchema } from '@formily/react';
-import { DesignableSchemaField } from '../SchemaField';
+import { SchemaRenderer, useDesignable } from '../DesignableSchemaField';
 import { DesignableBar } from './DesignableBar';
 
 export const Form = (props) => {
-  const form = useMemo(() => createForm(), []);
   const schema = useFieldSchema();
+  const { schema: designableSchema, refresh } = useDesignable();
+  return <SchemaRenderer onRefresh={(subSchema: Schema) => {
+    designableSchema.properties = subSchema.properties;
+    refresh();
+  }} schema={schema.toJSON()} onlyRenderProperties/>
 
-  return (
+  // return (
-    <FormProvider form={form}>
+  //   <FormProvider form={form}>
-      <DesignableSchemaField
+  //     <DesignableSchemaField
-        schema={{
+  //       schema={{
-          type: 'object',
+  //         type: 'object',
-          properties: schema.properties,
+  //         properties: {
-        }}
+  //           ...schema,
-      />
+  //         },
-    </FormProvider>
+  //       }}
-  );
+  //     />
+  //   </FormProvider>
+  // );
 };
 
 Form.DesignableBar = DesignableBar;

packages/client/src/blocks/grid/demos/demo1.tsx

@@ -44,6 +44,19 @@ const schema: ISchema = {
                 },
               },
             },
+            [`block_${uid()}`]: {
+              type: 'void',
+              'x-component': 'Grid.Block',
+              properties: {
+                [uid()]: {
+                  type: 'string',
+                  title: uid(),
+                  'x-designable-bar': 'FormItem.DesignableBar',
+                  'x-decorator': 'FormItem',
+                  'x-component': 'Input',
+                },
+              },
+            },
           },
         },
         [`col_${uid()}`]: {

packages/client/src/blocks/grid/hooks.tsx

@@ -57,14 +57,7 @@ export function useDrag(options?: any) {
     left: 0,
     top: 0,
   });
-  const { setDrag, setDrop, getDrop } = useDragDropManagerContext();
+  const { drag, setDrag, setDrop, getDrop } = useDragDropManagerContext();
-  // const dragDropManager = useContext(DragDropManagerContext);
-  const field = useField();
-  console.log(
-    'init',
-    { isDragging, previewElement },
-    field ? field.address.segments : null,
-  );
 
   useWillUnmount(() => {
     setIsDragging(false);
@@ -74,8 +67,9 @@ export function useDrag(options?: any) {
     window.__previewElement = undefined;
 
     setDrag(null);
+    setDrop(null);
 
-    // dragDropManager.drag = null;
+    document.body.classList.remove('dragging');
     document.body.style.cursor = null;
     document.body.style.userSelect = null;
   });
@@ -86,8 +80,6 @@ export function useDrag(options?: any) {
     }
     setDrop({ type, item });
     setDrag({ type, item });
-    // dragDropManager.drag = { type, item };
-    // dragDropManager.drop = { type, item };
     setIsDragging(true);
 
     const postion = {
@@ -127,7 +119,7 @@ export function useDrag(options?: any) {
     onDragStart && onDragStart(event);
     document.body.style.cursor = 'grab';
     document.body.style.userSelect = 'none';
-    document.body.className = 'dragging';
+    document.body.classList.add('dragging');
 
     // console.log(
     //   'onMouseDown',
@@ -157,6 +149,7 @@ export function useDrag(options?: any) {
     // dragDropManager.drag = null;
     previewElement.remove();
     setPreviewElement(undefined);
+    document.body.classList.remove('dragging');
     document.body.style.cursor = null;
     document.body.style.userSelect = null;
     // @ts-ignore
@@ -197,6 +190,8 @@ export function useDrag(options?: any) {
     if (!isDragging || !previewElement) {
       return;
     }
+
+    console.log('drag', drag.dropIds);
     // console.log(
     //   'onMouseMove',
     //   { isDragging, previewElement },
@@ -214,7 +209,6 @@ export function useDrag(options?: any) {
 
     if (type) {
       let dropElement = document.elementFromPoint(event.clientX, event.clientY);
-      console.log({ dropElement });
       const dropIds = [];
       while (dropElement) {
         if (!dropElement.getAttribute) {
@@ -224,7 +218,6 @@ export function useDrag(options?: any) {
         const dropId = dropElement.getAttribute('data-drop-id');
         const dropContext = getDrop(dropId);
         if (dropContext && dropContext.accept === type) {
-          console.log({ dropId });
           if (
             !dropContext.shallow ||
             (dropContext.shallow && dropIds.length === 0)
@@ -276,7 +269,7 @@ export function useDrop(options) {
     //   shallow,
     // };
     dropRef.current.setAttribute('data-drop-id', dropId);
-  }, []);
+  }, [dropId]);
 
   onMouseEnter((event) => {
     if (!canDrop) {
@@ -296,6 +289,7 @@ export function useDrop(options) {
     if (!drag || drag.type !== accept) {
       return;
     }
+    console.log('drag.dropIds', drag.dropIds, dropId)
     if (drag.dropIds && drag.dropIds.includes(dropId)) {
       const top = event.clientY - dropRef.current.getBoundingClientRect().top;
       const onTop = top < dropRef.current.clientHeight / 2;

packages/client/src/blocks/grid/index.md

@@ -6,7 +6,7 @@ nav:
 group:
   order: 2
   title: Blocks 
-  path: /client/blocks
+  path: /client/components
 ---
 
 # Grid - 栅格

packages/client/src/blocks/grid/index.tsx

@@ -96,7 +96,6 @@ export const Grid: any = observer((props) => {
             onDrop={(e) => {
               const blockSchema = e.dragItem.schema;
               const path = [...e.dragItem.path];
-              path.pop();
               prepend({
                 type: 'void',
                 'x-component': 'Grid.Row',
@@ -125,7 +124,6 @@ export const Grid: any = observer((props) => {
                   onDrop={(e) => {
                     const blockSchema = e.dragItem.schema;
                     const path = [...e.dragItem.path];
-                    path.pop();
                     insertAfter(
                       {
                         type: 'void',
@@ -168,7 +166,7 @@ Grid.Row = observer((props) => {
     deepRemove,
   } = useDesignable();
   const len = Object.keys(designableSchema.properties || {}).length;
-  console.log({ len });
+  console.log({ len, schema, designableSchema });
   return (
     <ColumnSizeContext.Provider value={len}>
       <ColDivider
@@ -183,7 +181,6 @@ Grid.Row = observer((props) => {
             },
           });
           const path = [...e.dragItem.path];
-          path.pop();
           deepRemove(path);
         }}
       />
@@ -207,7 +204,6 @@ Grid.Row = observer((props) => {
                   [...rowPath, key],
                 );
                 const path = [...e.dragItem.path];
-                path.pop();
                 deepRemove(path);
               }}
               onDragEnd={(e) => {

packages/client/src/blocks/grid/style.less

@@ -5,17 +5,36 @@
   margin: 0px -24px;
 }
 
-.nb-grid {
+// .nb-grid {
-  .nb-grid-col-divider {
+//   .nb-grid-col-divider {
-    &.resizable {
+//     &.resizable {
-      cursor: col-resize;
+//       cursor: col-resize;
-      &:hover {
+//       &:hover {
-        background: #e6f7ff;
+//         background: #e6f7ff;
+//       }
+//     }
+//   }
+// }
+
+body:not(.dragging) {
+  .nb-grid {
+    .nb-grid-col-divider {
+      &.resizable {
+        cursor: col-resize;
+        &:hover {
+          background: #e6f7ff;
+        }
       }
     }
   }
 }
 
+body.dragging {
+  .designable-bar {
+    display: none !important;
+  }
+}
+
 .nb-grid.dragging {
   position: relative;
   .nb-grid-col-divider {
@@ -35,9 +54,6 @@
       background: #e6f7ff;
     }
   }
-  .designable-bar {
-    display: none !important;
-  }
   .nb-grid-block {
     position: relative;
     &.hover {

packages/client/src/blocks/icon-picker/index.md

@@ -5,8 +5,8 @@ nav:
   path: /client
 group:
   order: 1
-  title: 区块 - Blocks
+  title: Components - 组件
-  path: /client/blocks
+  path: /client/components
 ---
 
 # IconPicker - 图标选择器
@@ -16,7 +16,7 @@ group:
  * title: 图标
  */
 import React from 'react';
-import { SchemaBlock } from '../';
+import { SchemaRenderer } from '../';
 
 const schema = {
   type: 'object',
@@ -50,7 +50,7 @@ const schema = {
 export default () => {
   return (
     <div>
-      <SchemaBlock schema={schema} />
+      <SchemaRenderer schema={schema} />
     </div>
   );
 };

packages/client/src/blocks/index.tsx

@@ -1,38 +1 @@
-import React, { useMemo } from 'react';
+export * from './DesignableSchemaField';
-import { createForm } from '@formily/core';
-import { FormProvider } from '@formily/react';
-import { DesignableSchemaField, SchemaField } from './SchemaField';
-
-export * from './SchemaField';
-
-export { SchemaRenderer, useDesignable, registerComponents, registerScope } from './DesignableSchemaField';
-
-export const SchemaBlock = ({ schema, onlyRenderProperties =  false, designable = true }) => {
-  const form = useMemo(() => createForm(), []);
-
-  let s = schema;
-
-  if (onlyRenderProperties) {
-    s = {
-      type: 'object',
-      properties: schema.properties,
-    };
-  } else if (schema.name) {
-    s = {
-      type: 'object',
-      properties: {
-        [schema.name]: schema,
-      },
-    };
-  }
-
-  return (
-    <FormProvider form={form}>
-      {designable ? (
-        <DesignableSchemaField schema={s} />
-      ) : (
-        <SchemaField schema={s} />
-      )}
-    </FormProvider>
-  );
-};

packages/client/src/blocks/input-number/index.md

@@ -5,8 +5,8 @@ nav:
   path: /client
 group:
   order: 1
-  title: 区块 - Blocks
+  title: Components - 组件
-  path: /client/blocks
+  path: /client/components
 ---
 
 # InputNumber - 数字框
@@ -18,7 +18,7 @@ group:
  * title: 数字框
  */
 import React from 'react';
-import { SchemaBlock } from '../';
+import { SchemaRenderer } from '../';
 
 const schema = {
   type: 'object',
@@ -50,7 +50,7 @@ const schema = {
 
 export default () => {
   return (
-    <SchemaBlock schema={schema} />
+    <SchemaRenderer schema={schema} />
   );
 };
 ```
@@ -62,7 +62,7 @@ export default () => {
  * title: 百分比
  */
 import React from 'react';
-import { SchemaBlock } from '../';
+import { SchemaRenderer } from '../';
 
 const schema = {
   type: 'object',
@@ -103,7 +103,7 @@ const schema = {
 
 export default () => {
   return (
-    <SchemaBlock schema={schema} />
+    <SchemaRenderer schema={schema} />
   );
 };
 ```

packages/client/src/blocks/input/index.md

@@ -5,8 +5,8 @@ nav:
   path: /client
 group:
   order: 1
-  title: 区块 - Blocks
+  title: Components - 组件
-  path: /client/blocks
+  path: /client/components
 ---
 
 # Input - 输入框
@@ -22,7 +22,7 @@ group:
  * title: 单行文本
  */
 import React from 'react';
-import { SchemaBlock } from '../';
+import { SchemaRenderer } from '../';
 
 const schema = {
   type: 'object',
@@ -54,7 +54,7 @@ const schema = {
 
 export default () => {
   return (
-    <SchemaBlock schema={schema} />
+    <SchemaRenderer schema={schema} />
   );
 };
 ```
@@ -67,7 +67,7 @@ export default () => {
  * desc: 用于多行输入，使用 `Input.TextArea` 组件，`ellipsis=true` 时超出隐藏
  */
 import React from 'react';
-import { SchemaBlock } from '../';
+import { SchemaRenderer } from '../';
 
 const schema = {
   type: 'object',
@@ -112,7 +112,7 @@ const schema = {
 
 export default () => {
   return (
-    <SchemaBlock schema={schema} />
+    <SchemaRenderer schema={schema} />
   );
 };
 ```
@@ -125,7 +125,7 @@ export default () => {
  * desc: 加上邮箱验证 `x-validator=email`
  */
 import React from 'react';
-import { SchemaBlock } from '../';
+import { SchemaRenderer } from '../';
 
 const schema = {
   type: 'object',
@@ -160,7 +160,7 @@ const schema = {
 
 export default () => {
   return (
-    <SchemaBlock schema={schema} />
+    <SchemaRenderer schema={schema} />
   );
 };
 ```
@@ -173,7 +173,7 @@ export default () => {
  * desc: 加上手机号验证 `x-validator=phone`
  */
 import React from 'react';
-import { SchemaBlock } from '../';
+import { SchemaRenderer } from '../';
 
 const schema = {
   type: 'object',
@@ -208,7 +208,7 @@ const schema = {
 
 export default () => {
   return (
-    <SchemaBlock schema={schema} />
+    <SchemaRenderer schema={schema} />
   );
 };
 ```
@@ -221,7 +221,7 @@ export default () => {
  * desc: 加上 URL 验证 `x-validator=url`
  */
 import React from 'react';
-import { SchemaBlock } from '../';
+import { SchemaRenderer } from '../';
 
 const schema = {
   type: 'object',
@@ -254,7 +254,7 @@ const schema = {
 
 export default () => {
   return (
-    <SchemaBlock schema={schema} />
+    <SchemaRenderer schema={schema} />
   );
 };
 ```

packages/client/src/blocks/markdown/index.md

@@ -5,8 +5,8 @@ nav:
   path: /client
 group:
   order: 1
-  title: 区块 - Blocks
+  title: Components - 组件
-  path: /client/blocks
+  path: /client/components
 ---
 
 # Markdown 编辑器
@@ -17,7 +17,7 @@ group:
 
 ```tsx
 import React from 'react';
-import { SchemaBlock } from '../';
+import { SchemaRenderer } from '../';
 
 const schema = {
   type: 'object',
@@ -62,7 +62,7 @@ const schema = {
 
 export default () => {
   return (
-    <SchemaBlock schema={schema} />
+    <SchemaRenderer schema={schema} />
   );
 };
 ```

packages/client/src/blocks/menu/index.md

@@ -5,8 +5,8 @@ nav:
   path: /client
 group:
   order: 1
-  title: 区块 - Blocks
+  title: Components - 组件
-  path: /client/blocks
+  path: /client/components
 ---
 
 # Menu - 菜单

packages/client/src/blocks/menu/index.tsx

@@ -50,7 +50,7 @@ import { useHistory } from 'react-router-dom';
 import cls from 'classnames';
 import ReactDOM from 'react-dom';
 import { useMount } from 'ahooks';
-import { useDesignable, SchemaRenderer, SchemaBlock } from '../';
+import { useDesignable, SchemaRenderer } from '../';
 import { Router } from "react-router";
 
 import { useLifecycle } from 'beautiful-react-hooks';
@@ -130,9 +130,11 @@ export const Menu: MenuType = observer((props) => {
               if (name.endsWith('-add-new')) {
                 return;
               }
+              console.log('diff', name)
               const current = diff.properties[name];
               selected.addProperty(current.name, current.toJSON());
             });
+            console.log({selected })
             refresh();
           }}
           schema={{

packages/client/src/blocks/password/index.md

@@ -5,8 +5,8 @@ nav:
   path: /client
 group:
   order: 1
-  title: 区块 - Blocks
+  title: Components - 组件
-  path: /client/blocks
+  path: /client/components
 ---
 
 # Password - 密码
@@ -17,7 +17,7 @@ group:
 
 ```tsx
 import React from 'react';
-import { SchemaBlock } from '../';
+import { SchemaRenderer } from '../';
 
 const schema = {
   type: 'object',
@@ -48,7 +48,7 @@ const schema = {
 
 export default () => {
   return (
-    <SchemaBlock schema={schema} />
+    <SchemaRenderer schema={schema} />
   );
 };
 ```

packages/client/src/blocks/radio/index.md

@@ -5,8 +5,8 @@ nav:
   path: /client
 group:
   order: 1
-  title: 区块 - Blocks
+  title: Components - 组件
-  path: /client/blocks
+  path: /client/components
 ---
 
 # Radio - 单选框
@@ -20,7 +20,7 @@ group:
  * title: 单选框
  */
 import React from 'react';
-import { SchemaBlock } from '../';
+import { SchemaRenderer } from '../';
 
 const options = [
   {
@@ -66,7 +66,7 @@ const schema = {
 
 export default () => {
   return (
-    <SchemaBlock schema={schema} />
+    <SchemaRenderer schema={schema} />
   );
 };
 ```

packages/client/src/blocks/radio/index.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { connect, mapProps, mapReadPretty, SchemaOptionsContext, useField } from '@formily/react'
 import { Radio as AntdRadio, Tag } from 'antd'
 import { RadioProps, RadioGroupProps } from 'antd/lib/radio'
-import uniq from 'lodash/uniq';
 
 type ComposedRadio = React.FC<RadioProps> & {
   Group?: React.FC<RadioGroupProps>

packages/client/src/blocks/select/index.md

@@ -5,8 +5,8 @@ nav:
   path: /client
 group:
   order: 1
-  title: 区块 - Blocks
+  title: Components - 组件
-  path: /client/blocks
+  path: /client/components
 ---
 
 # Select - 选择器
@@ -15,7 +15,7 @@ group:
 
 ```tsx
 import React from 'react';
-import { SchemaBlock } from '../';
+import { SchemaRenderer } from '../';
 
 const options = [
   {
@@ -65,7 +65,7 @@ const schema = {
 
 export default () => {
   return (
-    <SchemaBlock schema={schema}/>
+    <SchemaRenderer schema={schema}/>
   );
 };
 ```
@@ -74,7 +74,7 @@ export default () => {
 
 ```tsx
 import React from 'react';
-import { SchemaBlock } from '../';
+import { SchemaRenderer } from '../';
 
 const options = [
   {
@@ -129,7 +129,7 @@ const schema = {
 
 export default () => {
   return (
-    <SchemaBlock schema={schema} />
+    <SchemaRenderer schema={schema} />
   );
 };
 ```
@@ -138,7 +138,7 @@ export default () => {
 
 ```tsx
 import React from 'react';
-import { SchemaBlock } from '../';
+import { SchemaRenderer } from '../';
 
 const dataSource = [
   {
@@ -195,7 +195,7 @@ const schema = {
 
 export default () => {
   return (
-    <SchemaBlock schema={schema}/>
+    <SchemaRenderer schema={schema}/>
   );
 };
 ```
@@ -204,7 +204,7 @@ export default () => {
 
 ```tsx
 import React from 'react';
-import { SchemaBlock } from '../';
+import { SchemaRenderer } from '../';
 
 const dataSource = [
   {
@@ -267,7 +267,7 @@ const schema = {
 
 export default () => {
   return (
-    <SchemaBlock schema={schema} />
+    <SchemaRenderer schema={schema} />
   );
 };
 ```

packages/client/src/blocks/table/index.md

@@ -5,15 +5,15 @@ nav:
   path: /client
 group:
   order: 1
-  title: 区块 - Blocks
+  title: Components - 组件
-  path: /client/blocks
+  path: /client/components
 ---
 
 # Table - 表格
 
 ```tsx
 import React from 'react';
-import { SchemaBlock } from '../';
+import { SchemaRenderer } from '../';
 import { uid } from '@formily/shared';
 
 const schema = {
@@ -103,7 +103,7 @@ const schema = {
 
 export default () => {
   return (
-    <SchemaBlock schema={schema} />
+    <SchemaRenderer schema={schema} />
   );
 };
 ```

packages/client/src/blocks/tabs/index.md

@@ -5,8 +5,8 @@ nav:
   path: /client
 group:
   order: 1
-  title: 区块 - Blocks
+  title: Components - 组件
-  path: /client/blocks
+  path: /client/components
 ---
 
 # Tabs - 标签页
@@ -20,7 +20,7 @@ group:
  * title: 基本使用
  */
 import React from 'react';
-import { SchemaBlock } from '../';
+import { SchemaRenderer } from '../';
 
 const schema = {
   type: 'object',
@@ -68,7 +68,7 @@ const schema = {
 
 export default () => {
   return (
-    <SchemaBlock schema={schema} />
+    <SchemaRenderer schema={schema} />
   );
 };
 ```

packages/client/src/blocks/time-picker/index.md

@@ -5,8 +5,8 @@ nav:
   path: /client
 group:
   order: 1
-  title: 区块 - Blocks
+  title: Components - 组件
-  path: /client/blocks
+  path: /client/components
 ---
 
 # TimePicker - 时间选择器

packages/client/src/blocks/upload/index.md

@@ -5,8 +5,8 @@ nav:
   path: /client
 group:
   order: 1
-  title: 区块 - Blocks
+  title: Components - 组件
-  path: /client/blocks
+  path: /client/components
 ---
 
 # Upload - 上传

packages/client/src/demos/api/blocks-getSchema/item2.ts

@@ -1,3 +1,4 @@
+import { ISchema } from '@formily/json-schema';
 import { uid } from '@formily/shared';
 
 export default {
@@ -5,6 +6,7 @@ export default {
   properties: {
     [`g_${uid()}`]: {
       type: 'void',
+      'x-decorator': 'Card',
       'x-component': 'Grid',
       properties: {
         [`gr_${uid()}`]: {
@@ -35,4 +37,4 @@ export default {
       },
     },
   },
-}
+} as ISchema;

packages/client/src/demos/api/blocks-getSchema/item3.ts

@@ -1,12 +1,13 @@
-export default {
+import { uid } from '@formily/shared';
+
+const schema = {
   type: 'void',
-  name: 'item3',
+  name: `form_${uid()}`,
   'x-decorator': 'Card',
   'x-component': 'Form',
   properties: {
     grid: {
       type: 'void',
-      title: 'aa',
       'x-component': 'Grid',
       properties: {
         row1: {
@@ -26,6 +27,7 @@ export default {
                   'x-component-props': {
                     title: 'block11',
                   },
+                  'x-designable-bar': 'FormItem.DesignableBar',
                   properties: {
                     field1: {
                       type: 'string',
@@ -52,6 +54,7 @@ export default {
                   'x-component-props': {
                     title: 'block21',
                   },
+                  'x-designable-bar': 'FormItem.DesignableBar',
                   properties: {
                     field2: {
                       type: 'string',
@@ -83,6 +86,7 @@ export default {
                   'x-component-props': {
                     title: 'block211',
                   },
+                  'x-designable-bar': 'FormItem.DesignableBar',
                   properties: {
                     field3: {
                       type: 'string',
@@ -109,6 +113,7 @@ export default {
                   'x-component-props': {
                     title: 'block221',
                   },
+                  'x-designable-bar': 'FormItem.DesignableBar',
                   properties: {
                     field4: {
                       type: 'string',
@@ -158,6 +163,31 @@ export default {
             },
           },
         },
+        [`gr_${uid()}`]: {
+          type: 'void',
+          'x-component': 'Grid.Row',
+          properties: {
+            [`gc_${uid()}`]: {
+              type: 'void',
+              'x-component': 'Grid.Col',
+              'x-component-props': {
+                size: 1,
+              },
+              properties: {
+                [`gb_${uid()}`]: {
+                  type: 'void',
+                  'x-component': 'Grid.Block',
+                  properties: {
+                    [`gbn_${uid()}`]: {
+                      type: 'void',
+                      'x-component': 'AddNew.FormItem',
+                    },
+                  },
+                },
+              },
+            },
+          },
+        },
       },
     },
     actions: {
@@ -193,4 +223,6 @@ export default {
       },
     },
   },
-}
+};
+
+export default schema;

packages/client/src/templates/admin-layout/index.tsx

@@ -22,12 +22,8 @@ import {
   refreshGlobalAction,
   RouteComponentContext,
 } from '../../';
-import { SchemaBlock, SchemaRenderer } from '../../blocks';
+import { SchemaRenderer } from '../../blocks';
 import { useRequest } from 'ahooks';
-import cloneDeep from 'lodash/cloneDeep';
-import { Schema } from '@formily/react';
-import { DesignableContext } from '../../blocks/SchemaField';
-import { uid } from '@formily/shared';
 import {
   DatabaseOutlined,
   PlusOutlined,
@@ -154,7 +150,7 @@ function Database() {
         // bodyStyle={{ padding: 0 }}
         // footer={null}
       >
-        <SchemaBlock schema={schema} />
+        <SchemaRenderer schema={schema} />
       </Modal>
       <DatabaseOutlined
         onClick={() => setVisible(true)}

packages/client/src/templates/default-page/index.tsx

@@ -2,7 +2,7 @@ import React, { useContext, useEffect, useState } from 'react';
 import { Spin } from 'antd';
 import { Helmet } from 'react-helmet';
 import { useRequest } from 'ahooks';
-import { SchemaBlock } from '../../blocks';
+import { SchemaRenderer } from '../../blocks';
 
 export function DefaultPage({ route }) {
   const { data = {}, loading } = useRequest(
@@ -17,7 +17,7 @@ export function DefaultPage({ route }) {
   }
   return (
     <div>
-      <SchemaBlock schema={data} />
+      <SchemaRenderer schema={data} />
     </div>
   );
 }

yarn.lock

@@ -2872,6 +2872,22 @@
     semver "^7.3.4"
     tar "^6.1.0"
 
+"@monaco-editor/loader@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.1.1.tgz#37db648c81a86946d0febd391de00df9c28a0a3d"
+  integrity sha512-mkT4r4xDjIyOG9o9M6rJDSzEIeonwF80sYErxEvAAL4LncFVdcbNli8Qv6NDqF6nyv6sunuKkDzo4iFjxPL+uQ==
+  dependencies:
+    state-local "^1.0.6"
+
+"@monaco-editor/react@^4.2.1":
+  version "4.2.1"
+  resolved "https://registry.npmjs.org/@monaco-editor/react/-/react-4.2.1.tgz#75cb6e85e3640e05887a14005c370e46bd71256b"
+  integrity sha512-yN8qVY0PyFIbqPjfrZ5TbR/wrcfeiwoys8+0QkmyfiOzG74vXxSBOPIUxk7Ly+qCj7qWHPq1uDJskzFGaIqaPA==
+  dependencies:
+    "@monaco-editor/loader" "^1.1.1"
+    prop-types "^15.7.2"
+    state-local "^1.0.7"
+
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
   resolved "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
@@ -6228,6 +6244,11 @@ constants-browserify@^1.0.0:
   resolved "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75"
   integrity sha1-wguW2MYXdIqvHBYCF2DNJ/y4y3U=
 
+constate@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.npmjs.org/constate/-/constate-3.3.0.tgz#3961f552ab1bec2a9d0d56c9bc1d6bcde407357b"
+  integrity sha512-mRjWH2J4D3Rq6XAuEhoGUkBWrBLUNbiYr/Rp4M/MEEp+LN0vctQS3EAw/6bxlnDy59T+UrAEU9Tg136Dfp6ytg==
+
 content-disposition@~0.5.2:
   version "0.5.3"
   resolved "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz#e130caf7e7279087c5616c2007d0485698984fbd"
@@ -17352,6 +17373,11 @@ stack-utils@^2.0.2:
   dependencies:
     escape-string-regexp "^2.0.0"
 
+state-local@^1.0.6, state-local@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz#da50211d07f05748d53009bee46307a37db386d5"
+  integrity sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==
+
 static-extend@^0.1.1:
   version "0.1.2"
   resolved "https://registry.npmjs.org/static-extend/-/static-extend-0.1.2.tgz#60809c39cbff55337226fd5e0b520f341f1fb5c6"