Markdown.Void
This commit is contained in:
		
							parent
							
								
									19cbcd1e94
								
							
						
					
					
						commit
						e21a9ab57d
					
				@ -103,16 +103,13 @@ const isGridBlock = (schema: Schema) => {
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
function generateCardItemSchema(component) {
 | 
					function generateCardItemSchema(component) {
 | 
				
			||||||
  const defaults = {
 | 
					  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-decorator': 'CardItem',
 | 
				
			||||||
      'x-read-pretty': true,
 | 
					      'x-read-pretty': true,
 | 
				
			||||||
      'x-component': 'Markdown',
 | 
					      'x-component': 'Markdown.Void',
 | 
				
			||||||
      'x-component-props': {
 | 
					 | 
				
			||||||
        savedInSchema: true,
 | 
					 | 
				
			||||||
      },
 | 
					 | 
				
			||||||
    },
 | 
					    },
 | 
				
			||||||
    Table: {
 | 
					    Table: {
 | 
				
			||||||
      type: 'array',
 | 
					      type: 'array',
 | 
				
			||||||
@ -487,7 +484,7 @@ AddNew.CardItem = observer((props: any) => {
 | 
				
			|||||||
                info.key === 'addNewTable' ? 'Table' : 'Form',
 | 
					                info.key === 'addNewTable' ? 'Table' : 'Form',
 | 
				
			||||||
              );
 | 
					              );
 | 
				
			||||||
              resourceName = values.name;
 | 
					              resourceName = values.name;
 | 
				
			||||||
            } else if (info.key !== 'Markdown') {
 | 
					            } else if (info.key !== 'Markdown.Void') {
 | 
				
			||||||
              const keys = info.key.split('.');
 | 
					              const keys = info.key.split('.');
 | 
				
			||||||
              const component = keys.shift();
 | 
					              const component = keys.shift();
 | 
				
			||||||
              const tableName = keys.join('.');
 | 
					              const tableName = keys.join('.');
 | 
				
			||||||
@ -542,7 +539,7 @@ AddNew.CardItem = observer((props: any) => {
 | 
				
			|||||||
            <Menu.Divider></Menu.Divider>
 | 
					            <Menu.Divider></Menu.Divider>
 | 
				
			||||||
            <Menu.Item key={'addNewForm'}>新建数据表</Menu.Item>
 | 
					            <Menu.Item key={'addNewForm'}>新建数据表</Menu.Item>
 | 
				
			||||||
          </Menu.SubMenu>
 | 
					          </Menu.SubMenu>
 | 
				
			||||||
          <Menu.Item key={'Markdown'}>新建文本段</Menu.Item>
 | 
					          <Menu.Item key={'Markdown.Void'}>新建文本段</Menu.Item>
 | 
				
			||||||
          <Menu.SubMenu disabled key={'Ref'} title={'引用模板'}>
 | 
					          <Menu.SubMenu disabled key={'Ref'} title={'引用模板'}>
 | 
				
			||||||
            <Menu.ItemGroup key={'form-select'} title={'选择模板'}>
 | 
					            <Menu.ItemGroup key={'form-select'} title={'选择模板'}>
 | 
				
			||||||
              <Menu.Item key={'Ref.name1'}>模板1</Menu.Item>
 | 
					              <Menu.Item key={'Ref.name1'}>模板1</Menu.Item>
 | 
				
			||||||
@ -595,7 +592,7 @@ AddNew.BlockItem = observer((props: any) => {
 | 
				
			|||||||
                title: uid(),
 | 
					                title: uid(),
 | 
				
			||||||
                'x-designable-bar': 'BlockItem.DesignableBar',
 | 
					                'x-designable-bar': 'BlockItem.DesignableBar',
 | 
				
			||||||
                'x-decorator': 'CardItem',
 | 
					                'x-decorator': 'CardItem',
 | 
				
			||||||
                'x-component': 'Markdown',
 | 
					                'x-component': 'Markdown.Void',
 | 
				
			||||||
              };
 | 
					              };
 | 
				
			||||||
              if (schema['key']) {
 | 
					              if (schema['key']) {
 | 
				
			||||||
                data['key'] = uid();
 | 
					                data['key'] = uid();
 | 
				
			||||||
@ -788,15 +785,12 @@ AddNew.FormItem = observer((props: any) => {
 | 
				
			|||||||
            onClick={async () => {
 | 
					            onClick={async () => {
 | 
				
			||||||
              let data: ISchema = {
 | 
					              let data: ISchema = {
 | 
				
			||||||
                key: uid(),
 | 
					                key: uid(),
 | 
				
			||||||
                type: 'string',
 | 
					                type: 'void',
 | 
				
			||||||
                default: '这是一段演示文字,**支持使用 Markdown 语法**',
 | 
					                default: '这是一段演示文字,**支持使用 Markdown 语法**',
 | 
				
			||||||
                'x-designable-bar': 'Markdown.FormItemDesignableBar',
 | 
					                'x-designable-bar': 'Markdown.Void.DesignableBar',
 | 
				
			||||||
                'x-decorator': 'FormItem',
 | 
					                'x-decorator': 'FormItem',
 | 
				
			||||||
                'x-read-pretty': true,
 | 
					                'x-read-pretty': true,
 | 
				
			||||||
                'x-component': 'Markdown',
 | 
					                'x-component': 'Markdown.Void',
 | 
				
			||||||
                'x-component-props': {
 | 
					 | 
				
			||||||
                  savedInSchema: true,
 | 
					 | 
				
			||||||
                },
 | 
					 | 
				
			||||||
              };
 | 
					              };
 | 
				
			||||||
              if (isGridBlock(schema)) {
 | 
					              if (isGridBlock(schema)) {
 | 
				
			||||||
                path.pop();
 | 
					                path.pop();
 | 
				
			||||||
 | 
				
			|||||||
@ -10,12 +10,13 @@ import { useCookieState, useRequest } from 'ahooks';
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
export * from '../components/schema-renderer';
 | 
					export * from '../components/schema-renderer';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
export function mapReadPretty(component, readPrettyProps) {
 | 
					export function mapReadPretty(component: any, readPrettyProps?: any) {
 | 
				
			||||||
  return function (target) {
 | 
					  return function (target) {
 | 
				
			||||||
    return observer(
 | 
					    return observer(
 | 
				
			||||||
      (props) => {
 | 
					      (props) => {
 | 
				
			||||||
        const field = useField();
 | 
					        const field = useField();
 | 
				
			||||||
        if (!isVoidField(field) && field?.pattern === 'readPretty') {
 | 
					        // if (!isVoidField(field) && field?.pattern === 'readPretty') {
 | 
				
			||||||
 | 
					        if (field?.pattern === 'readPretty') {
 | 
				
			||||||
          return React.createElement(component, {
 | 
					          return React.createElement(component, {
 | 
				
			||||||
            ...readPrettyProps,
 | 
					            ...readPrettyProps,
 | 
				
			||||||
            ...props,
 | 
					            ...props,
 | 
				
			||||||
 | 
				
			|||||||
@ -2,10 +2,10 @@ import React from 'react';
 | 
				
			|||||||
import {
 | 
					import {
 | 
				
			||||||
  connect,
 | 
					  connect,
 | 
				
			||||||
  mapProps,
 | 
					  mapProps,
 | 
				
			||||||
  mapReadPretty,
 | 
					 | 
				
			||||||
  observer,
 | 
					  observer,
 | 
				
			||||||
  useField,
 | 
					  useField,
 | 
				
			||||||
  useFieldSchema,
 | 
					  useFieldSchema,
 | 
				
			||||||
 | 
					  mapReadPretty,
 | 
				
			||||||
} from '@formily/react';
 | 
					} from '@formily/react';
 | 
				
			||||||
import { Button, Dropdown, Input as AntdInput, Menu, Space } from 'antd';
 | 
					import { Button, Dropdown, Input as AntdInput, Menu, Space } from 'antd';
 | 
				
			||||||
import { InputProps, TextAreaProps } from 'antd/lib/input';
 | 
					import { InputProps, TextAreaProps } from 'antd/lib/input';
 | 
				
			||||||
@ -23,33 +23,7 @@ import { isGridRowOrCol } from '../grid';
 | 
				
			|||||||
import './style.less';
 | 
					import './style.less';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
export const Markdown: any = connect(
 | 
					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) => {
 | 
					  mapProps((props: any, field) => {
 | 
				
			||||||
    return {
 | 
					    return {
 | 
				
			||||||
      ...props,
 | 
					      ...props,
 | 
				
			||||||
@ -65,16 +39,71 @@ export const Markdown: any = connect(
 | 
				
			|||||||
    };
 | 
					    };
 | 
				
			||||||
  }),
 | 
					  }),
 | 
				
			||||||
  mapReadPretty((props) => {
 | 
					  mapReadPretty((props) => {
 | 
				
			||||||
    console.log('Markdown', props);
 | 
					 | 
				
			||||||
    let text = props.value;
 | 
					    let text = props.value;
 | 
				
			||||||
    let 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} />;
 | 
					    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 field = useField();
 | 
				
			||||||
  const { designable, schema, refresh, deepRemove } = useDesignable();
 | 
					  const { designable, schema, refresh, deepRemove } = useDesignable();
 | 
				
			||||||
  const [visible, setVisible] = useState(false);
 | 
					  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 field = useField();
 | 
				
			||||||
  const { designable, schema, refresh, deepRemove } = useDesignable();
 | 
					  const { designable, schema, refresh, deepRemove } = useDesignable();
 | 
				
			||||||
  const [visible, setVisible] = useState(false);
 | 
					  const [visible, setVisible] = useState(false);
 | 
				
			||||||
@ -162,13 +191,8 @@ Markdown.FormItemDesignableBar = observer((props) => {
 | 
				
			|||||||
            }}
 | 
					            }}
 | 
				
			||||||
            overlay={
 | 
					            overlay={
 | 
				
			||||||
              <Menu>
 | 
					              <Menu>
 | 
				
			||||||
                <Menu.Item
 | 
					                <Menu.Item key={'update'} onClick={() => {}}>
 | 
				
			||||||
                  key={'update'}
 | 
					                  修改标题
 | 
				
			||||||
                  onClick={() => {
 | 
					 | 
				
			||||||
                    field.readPretty = false;
 | 
					 | 
				
			||||||
                  }}
 | 
					 | 
				
			||||||
                >
 | 
					 | 
				
			||||||
                  修改文本内容
 | 
					 | 
				
			||||||
                </Menu.Item>
 | 
					                </Menu.Item>
 | 
				
			||||||
                <Menu.Divider />
 | 
					                <Menu.Divider />
 | 
				
			||||||
                <Menu.Item
 | 
					                <Menu.Item
 | 
				
			||||||
@ -182,7 +206,7 @@ Markdown.FormItemDesignableBar = observer((props) => {
 | 
				
			|||||||
                    }
 | 
					                    }
 | 
				
			||||||
                  }}
 | 
					                  }}
 | 
				
			||||||
                >
 | 
					                >
 | 
				
			||||||
                  删除当前文本
 | 
					                  删除当前字段
 | 
				
			||||||
                </Menu.Item>
 | 
					                </Menu.Item>
 | 
				
			||||||
              </Menu>
 | 
					              </Menu>
 | 
				
			||||||
            }
 | 
					            }
 | 
				
			||||||
 | 
				
			|||||||
		Loading…
	
		Reference in New Issue
	
	Block a user