feat: rich text

packages/client/package.json

@@ -37,6 +37,7 @@
     "react-helmet": "^6.1.0",
     "react-i18next": "^11.15.1",
     "react-image-lightbox": "^5.1.4",
+    "react-quill": "^1.3.5",
     "react-router-dom": "^5.2.0",
     "slate": "^0.76.1",
     "slate-history": "^0.66.0",

packages/client/src/collection-manager/CollectionField.tsx

@@ -26,6 +26,7 @@ const InternalField: React.FC = (props) => {
     if (!uiSchema) {
       return;
     }
+    setFieldProps('content', uiSchema['x-content']);
     setFieldProps('title', uiSchema.title);
     setFieldProps('description', uiSchema.description);
     setFieldProps('initialValue', uiSchema.default);
@@ -39,6 +40,7 @@ const InternalField: React.FC = (props) => {
     const originalProps = compile(uiSchema['x-component-props']) || {};
     const componentProps = merge(originalProps, field.componentProps || {});
     field.component = [component, componentProps];
+
     // if (interfaceType === 'input') {
     //   field.componentProps.ellipsis = true;
     // } else if (interfaceType === 'textarea') {

packages/client/src/collection-manager/interfaces/richText.ts

@@ -10,11 +10,11 @@ export const richText: IField = {
   title: '{{t("Rich Text")}}',
   default: {
     interface: 'richText',
-    type: 'json',
+    type: 'text',
     // name,
     uiSchema: {
-      type: 'array',
-      'x-component': 'Slate.RichText',
+      type: 'string',
+      'x-component': 'RichText',
     },
   },
   properties: {

packages/client/src/schema-component/antd/index.ts

@@ -25,6 +25,7 @@ export * from './page';
 export * from './password';
 export * from './radio';
 export * from './record-picker';
+export * from './rich-text';
 export * from './select';
 export * from './space';
 export * from './table';
@@ -34,3 +35,4 @@ export * from './time-picker';
 export * from './tree-select';
 export * from './upload';
 import './index.less';
+

packages/client/src/schema-component/antd/input/ReadPretty.tsx

@@ -12,6 +12,7 @@ type Composed = {
   TextArea: React.FC<
     TextAreaProps & { ellipsis?: any; text?: any; addonBefore?: any; suffix?: any; addonAfter?: any; autop?: boolean }
   >;
+  Html?: any;
 };
 
 export const ReadPretty: Composed = () => null;
@@ -42,6 +43,44 @@ ReadPretty.TextArea = (props) => {
       }}
     />
   );
+  console.log('value', value);
+  const content = (
+    <EllipsisWithTooltip ellipsis={ellipsis} popoverContent={autop ? html : value}>
+      {ellipsis ? text || value : html}
+    </EllipsisWithTooltip>
+  );
+  return (
+    <div className={cls(prefixCls, props.className)} style={props.style}>
+      {props.addonBefore}
+      {props.prefix}
+      {content}
+      {props.suffix}
+      {props.addonAfter}
+    </div>
+  );
+};
+
+function convertToText(html: string) {
+  let temp = document.createElement('div');
+  temp.innerHTML = html;
+  const text = temp.innerText;
+  temp = null;
+  return text.replace(/[\n\r]/g, '');
+}
+
+ReadPretty.Html = (props) => {
+  const prefixCls = usePrefixCls('description-textarea', props);
+  const compile = useCompile();
+  const value = compile(props.value ?? '');
+  const { autop = true, ellipsis } = props;
+  const html = (
+    <div
+      dangerouslySetInnerHTML={{
+        __html: value,
+      }}
+    />
+  );
+  const text = convertToText(value);
   const content = (
     <EllipsisWithTooltip ellipsis={ellipsis} popoverContent={autop ? html : value}>
       {ellipsis ? text || value : html}

packages/client/src/schema-component/antd/rich-text/RichText.tsx

@@ -0,0 +1,42 @@
+import { connect, mapReadPretty } from '@formily/react';
+import React from 'react';
+import ReactQuill from 'react-quill';
+import { ReadPretty as InputReadPretty } from '../input';
+import './style.less';
+
+export const RichText = connect(
+  (props) => {
+    const modules = {
+      toolbar: [
+        ['bold', 'italic', 'underline', 'link'],
+        [{ list: 'ordered' }, { list: 'bullet' }],
+        ['clean'],
+      ],
+    };
+    const formats = [
+      'header',
+      'bold',
+      'italic',
+      'underline',
+      'strike',
+      'blockquote',
+      'list',
+      'bullet',
+      'indent',
+      'link',
+      'image',
+    ];
+    const { value, onChange } = props;
+    return (
+      <ReactQuill
+        modules={modules}
+        formats={formats}
+        value={typeof value === 'string' ? value : ''}
+        onChange={onChange}
+      />
+    );
+  },
+  mapReadPretty((props) => {
+    return <InputReadPretty.Html {...props} />;
+  }),
+);

packages/client/src/schema-component/antd/rich-text/demos/demo1.tsx

@@ -0,0 +1,39 @@
+import { FormItem } from '@formily/antd';
+import { RichText, SchemaComponent, SchemaComponentProvider } from '@nocobase/client';
+import React from 'react';
+import 'react-quill/dist/quill.snow.css'; // ES6
+
+const schema = {
+  type: 'object',
+  properties: {
+    input: {
+      type: 'string',
+      title: `Editable`,
+      'x-decorator': 'FormItem',
+      'x-component': 'RichText',
+      'x-reactions': {
+        target: 'read',
+        fulfill: {
+          state: {
+            value: '{{$self.value}}',
+          },
+        },
+      },
+    },
+    read: {
+      type: 'string',
+      title: `Read pretty`,
+      'x-read-pretty': true,
+      'x-decorator': 'FormItem',
+      'x-component': 'RichText',
+    },
+  },
+};
+
+export default () => {
+  return (
+    <SchemaComponentProvider components={{ RichText, FormItem }}>
+      <SchemaComponent schema={schema} />
+    </SchemaComponentProvider>
+  );
+};

packages/client/src/schema-component/antd/rich-text/index.md

@@ -0,0 +1,12 @@
+---
+nav:
+  path: /client
+group:
+  path: /schema-components
+---
+
+# Rich Text
+
+## Examples
+
+<code src="./demos/demo1.tsx" />

packages/client/src/schema-component/antd/rich-text/index.ts

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