* feat: markdown migrate * feat: markdown migrate * feat: add Markdown component into schema components * refactor: modifty Markdown.Void component * refactor: modifty Markdown.Void component * refactor: modifty Markdown.Void component * refactor: modify Markdown.Void component * refactor: modify Markdown.Void component * fix: x-editable=false Co-authored-by: chenos <chenlinxh@gmail.com>
52 lines
1.1 KiB
TypeScript
52 lines
1.1 KiB
TypeScript
/**
|
|
* title: Markdown.Void
|
|
*/
|
|
import { FormItem } from '@formily/antd';
|
|
import { observer, useField } from '@formily/react';
|
|
import { Markdown, SchemaComponent, SchemaComponentProvider } from '@nocobase/client';
|
|
import { Button } from 'antd';
|
|
import React from 'react';
|
|
|
|
const schema = {
|
|
type: 'object',
|
|
properties: {
|
|
markdown: {
|
|
type: 'void',
|
|
title: `Read pretty`,
|
|
'x-decorator': 'Editable',
|
|
'x-component': 'Markdown.Void',
|
|
'x-editable': false,
|
|
'x-component-props': {
|
|
content: '# Markdown content',
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
const Editable = observer((props: any) => {
|
|
const filed = useField<any>();
|
|
if (filed.editable) {
|
|
return props.children;
|
|
}
|
|
return (
|
|
<div>
|
|
<Button
|
|
onClick={() => {
|
|
filed.editable = true;
|
|
}}
|
|
>
|
|
编辑
|
|
</Button>
|
|
<div>{props.children}</div>
|
|
</div>
|
|
);
|
|
});
|
|
|
|
export default () => {
|
|
return (
|
|
<SchemaComponentProvider components={{ Editable, Markdown, FormItem }}>
|
|
<SchemaComponent schema={schema} />
|
|
</SchemaComponentProvider>
|
|
);
|
|
};
|