Markdown.Void

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

@@ -103,16 +103,13 @@ const isGridBlock = (schema: Schema) => {
 
 function generateCardItemSchema(component) {
   const defaults = {
-    Markdown: {
+    'Markdown.Void': {
-      type: 'string',
+      type: 'void',
-      default: '这是一段演示文字',
+      default: '这是一段演示文字，**支持使用 Markdown 语法**',
-      'x-designable-bar': 'Markdown.DesignableBar',
+      'x-designable-bar': 'Markdown.Void.DesignableBar',
       'x-decorator': 'CardItem',
       'x-read-pretty': true,
-      'x-component': 'Markdown',
+      'x-component': 'Markdown.Void',
-      'x-component-props': {
-        savedInSchema: true,
-      },
     },
     Table: {
       type: 'array',
@@ -487,7 +484,7 @@ AddNew.CardItem = observer((props: any) => {
                 info.key === 'addNewTable' ? 'Table' : 'Form',
               );
               resourceName = values.name;
-            } else if (info.key !== 'Markdown') {
+            } else if (info.key !== 'Markdown.Void') {
               const keys = info.key.split('.');
               const component = keys.shift();
               const tableName = keys.join('.');
@@ -542,7 +539,7 @@ AddNew.CardItem = observer((props: any) => {
             <Menu.Divider></Menu.Divider>
             <Menu.Item key={'addNewForm'}>新建数据表</Menu.Item>
           </Menu.SubMenu>
-          <Menu.Item key={'Markdown'}>新建文本段</Menu.Item>
+          <Menu.Item key={'Markdown.Void'}>新建文本段</Menu.Item>
           <Menu.SubMenu disabled key={'Ref'} title={'引用模板'}>
             <Menu.ItemGroup key={'form-select'} title={'选择模板'}>
               <Menu.Item key={'Ref.name1'}>模板1</Menu.Item>
@@ -595,7 +592,7 @@ AddNew.BlockItem = observer((props: any) => {
                 title: uid(),
                 'x-designable-bar': 'BlockItem.DesignableBar',
                 'x-decorator': 'CardItem',
-                'x-component': 'Markdown',
+                'x-component': 'Markdown.Void',
               };
               if (schema['key']) {
                 data['key'] = uid();
@@ -788,15 +785,12 @@ AddNew.FormItem = observer((props: any) => {
             onClick={async () => {
               let data: ISchema = {
                 key: uid(),
-                type: 'string',
+                type: 'void',
                 default: '这是一段演示文字，**支持使用 Markdown 语法**',
-                'x-designable-bar': 'Markdown.FormItemDesignableBar',
+                'x-designable-bar': 'Markdown.Void.DesignableBar',
                 'x-decorator': 'FormItem',
                 'x-read-pretty': true,
-                'x-component': 'Markdown',
+                'x-component': 'Markdown.Void',
-                'x-component-props': {
-                  savedInSchema: true,
-                },
               };
               if (isGridBlock(schema)) {
                 path.pop();

packages/client/src/schemas/index.tsx

@@ -10,12 +10,13 @@ import { useCookieState, useRequest } from 'ahooks';
 
 export * from '../components/schema-renderer';
 
-export function mapReadPretty(component, readPrettyProps) {
+export function mapReadPretty(component: any, readPrettyProps?: any) {
   return function (target) {
     return observer(
       (props) => {
         const field = useField();
-        if (!isVoidField(field) && field?.pattern === 'readPretty') {
+        // if (!isVoidField(field) && field?.pattern === 'readPretty') {
+        if (field?.pattern === 'readPretty') {
           return React.createElement(component, {
             ...readPrettyProps,
             ...props,

packages/client/src/schemas/markdown/index.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 import {
   connect,
   mapProps,
-  mapReadPretty,
   observer,
   useField,
   useFieldSchema,
+  mapReadPretty,
 } from '@formily/react';
 import { Button, Dropdown, Input as AntdInput, Menu, Space } from 'antd';
 import { InputProps, TextAreaProps } from 'antd/lib/input';
@@ -23,33 +23,7 @@ import { isGridRowOrCol } from '../grid';
 import './style.less';
 
 export const Markdown: any = connect(
-  (props) => {
+  AntdInput.TextArea,
-    const { schema } = useDesignable();
-    const field = useField<any>();
-    const { savedInSchema, ...others } = props;
-    console.log('Markdown', props);
-    return savedInSchema ? (
-      <div className={'mb-markdown'} style={{ position: 'relative' }}>
-        <AntdInput.TextArea autoSize={{ minRows: 3 }} {...others} />
-        <Button
-          style={{ position: 'absolute', bottom: 5, right: 5 }}
-          type={'primary'}
-          onClick={async () => {
-            field.readPretty = true;
-            schema['default'] = field.value;
-            await updateSchema({
-              key: schema['key'],
-              default: field.value,
-            });
-          }}
-        >
-          保存
-        </Button>
-      </div>
-    ) : (
-      <AntdInput.TextArea autoSize={{ minRows: 1 }} {...others} />
-    );
-  },
   mapProps((props: any, field) => {
     return {
       ...props,
@@ -65,16 +39,71 @@ export const Markdown: any = connect(
     };
   }),
   mapReadPretty((props) => {
-    console.log('Markdown', props);
     let text = props.value;
     let value = (
-      <div className={'nb-markdown'} dangerouslySetInnerHTML={{ __html: micromark(text || '') }} />
+      <div
+        className={'nb-markdown'}
+        dangerouslySetInnerHTML={{ __html: micromark(text || '') }}
+      />
     );
     return <Display.TextArea {...props} text={text} value={value} />;
   }),
 );
 
-Markdown.DesignableBar = observer((props) => {
+function MarkdownTextArea(props: any) {
+  const [value, setValue] = useState(props.defaultValue);
+  return (
+    <div className={'mb-markdown'} style={{ position: 'relative' }}>
+      <AntdInput.TextArea
+        autoSize={{ minRows: 3 }}
+        {...props}
+        value={value}
+        onChange={(e) => {
+          setValue(e.target.value);
+        }}
+      />
+      <Button
+        style={{ position: 'absolute', bottom: 5, right: 5 }}
+        type={'primary'}
+        onClick={() => {
+          props.onSubmit && props.onSubmit(value);
+        }}
+      >
+        保存
+      </Button>
+    </div>
+  );
+}
+
+Markdown.Void = observer((props: any) => {
+  const { schema } = useDesignable();
+  const field = useField<any>();
+  const text = schema['default'];
+  let value = (
+    <div
+      className={'nb-markdown'}
+      dangerouslySetInnerHTML={{ __html: micromark(text || '') }}
+    />
+  );
+  return field?.pattern !== 'readPretty' ? (
+    <MarkdownTextArea
+      {...props}
+      defaultValue={schema['default']}
+      onSubmit={async (value) => {
+        field.readPretty = true;
+        schema['default'] = value;
+        await updateSchema({
+          key: schema['key'],
+          default: value,
+        });
+      }}
+    />
+  ) : (
+    <Display.TextArea {...props} text={text} value={value} />
+  );
+});
+
+Markdown.Void.DesignableBar = observer((props) => {
   const field = useField();
   const { designable, schema, refresh, deepRemove } = useDesignable();
   const [visible, setVisible] = useState(false);
@@ -135,7 +164,7 @@ Markdown.DesignableBar = observer((props) => {
   );
 });
 
-Markdown.FormItemDesignableBar = observer((props) => {
+Markdown.DesignableBar = observer((props) => {
   const field = useField();
   const { designable, schema, refresh, deepRemove } = useDesignable();
   const [visible, setVisible] = useState(false);
@@ -162,13 +191,8 @@ Markdown.FormItemDesignableBar = observer((props) => {
             }}
             overlay={
               <Menu>
-                <Menu.Item
+                <Menu.Item key={'update'} onClick={() => {}}>
-                  key={'update'}
+                  修改标题
-                  onClick={() => {
-                    field.readPretty = false;
-                  }}
-                >
-                  修改文本内容
                 </Menu.Item>
                 <Menu.Divider />
                 <Menu.Item
@@ -182,7 +206,7 @@ Markdown.FormItemDesignableBar = observer((props) => {
                     }
                   }}
                 >
-                  删除当前文本
+                  删除当前字段
                 </Menu.Item>
               </Menu>
             }