feat: 富文本编辑器, close(#4, #6)

README.md

@@ -50,8 +50,8 @@
   - [x] 0️⃣ issue
 - [ ] 1.0 版
   - [x] 上传图片组件
+  - [x] 富文本组件
   - [ ] 模板组件
-  - [ ] 富文本组件
   - [ ] 上传视频组件
   - [ ] 代码编辑器组件
   - [ ] ...

cspell.json

@@ -20,6 +20,7 @@
     "globby",
     "gitee",
     "Codecov",
+    "wangeditor",
     "anticon",
     "browserslist"
   ],

docs/components/form/__demos__/editor/base.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { SuperEditor, SuperForm, SuperInput } from 'super-antd';
+
+const App = () => {
+  return (
+    <SuperForm debug>
+      <SuperInput name="name" label="姓名" />
+      <SuperEditor name="description" label="介绍" />
+    </SuperForm>
+  );
+};
+
+export default App;

docs/components/form/__demos__/editor/menu.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { SuperEditor, SuperEditorProps, SuperForm, SuperInput, withDefaultProps } from 'super-antd';
+
+const MyEditor = withDefaultProps<SuperEditorProps>(SuperEditor, {
+  // 更多配置项参考：https://www.wangeditor.com/doc/pages/03-%E9%85%8D%E7%BD%AE%E8%8F%9C%E5%8D%95/01-%E8%87%AA%E5%AE%9A%E4%B9%89%E8%8F%9C%E5%8D%95.html
+  config: {
+    menus: ['bold', 'head', 'link', 'italic', 'foreColor', 'underline'],
+    colors: ['#000000', '#eeece0', '#1c487f', '#4d80bf'],
+  },
+});
+
+const App = () => {
+  return (
+    <SuperForm debug>
+      <SuperInput name="name" label="姓名" />
+      <MyEditor name="description" label="介绍" />
+    </SuperForm>
+  );
+};
+
+export default App;

docs/components/form/__demos__/editor/readonly.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { SuperEditor, SuperForm, SuperInput } from 'super-antd';
+
+const App = () => {
+  return (
+    <SuperForm
+      debug
+      readonly
+      initialValues={{
+        name: 'jack',
+        description:
+          '<blockquote><p>世界上只有一种真正的英雄主义，那就是看清生活的真相之后，依然热爱生活。 --<strong style="font-size: 14px; font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;;">罗曼罗兰</strong></p></blockquote>',
+      }}
+    >
+      <SuperInput name="name" label="姓名" />
+      <SuperEditor name="description" label="介绍" />
+    </SuperForm>
+  );
+};
+
+export default App;

docs/components/form/__demos__/editor/upload.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { SuperEditor, SuperForm, SuperInput } from 'super-antd';
+
+const App = () => {
+  return (
+    <SuperForm debug>
+      <SuperInput name="name" label="姓名" />
+      <SuperEditor
+        name="description"
+        label="介绍"
+        config={{
+          menus: ['image'],
+          uploadImgServer: 'https://www.fastmock.site/mock/3bff4788a9dad8a803681a2bca5f9cae/api/upload-img',
+        }}
+      />
+    </SuperForm>
+  );
+};
+
+export default App;

docs/components/form/editor.md

@@ -0,0 +1,37 @@
+# 富文本编辑器
+
+`super-antd` 富文本编辑器是基于 [wangeditor](https://www.wangeditor.com/) 和 [wangeditor-for-react](https://github.com/dongggcom/wangeditor-for-react) 实现的，优秀的编辑器有很多，选择它有几个关键的考量：
+
+- 是否在维护：持续维护中 ✅
+- 是否能上传本地图片是否简单：简单 ✅
+- 是否有现成的集成 React 的方案：有 ✅
+- 文件包大小：构建结果 75kb，在编辑中属于较小的 ✅
+- 中文支持：中文非常友好 ✅
+- 文档：文档简单易读 ✅
+- 界面：简洁爽朗 ✅
+
+## 基本使用
+
+<code src="./__demos__/editor/base.tsx" />
+
+## 配置菜单
+
+配置菜单我们推荐其和 `withDefaultProps` 一起使用，这样就可以一次配置，全项目共用，具体参考下面的例子。
+
+<code src="./__demos__/editor/menu.tsx" />
+
+> 更多配置项参考：https://www.wangeditor.com/doc/pages/03-%E9%85%8D%E7%BD%AE%E8%8F%9C%E5%8D%95/01-%E8%87%AA%E5%AE%9A%E4%B9%89%E8%8F%9C%E5%8D%95.html
+
+## 上传图片
+
+<code src="./__demos__/editor/upload.tsx" />
+
+> 更多关于上传图片的配置参见：https://www.wangeditor.com/doc/pages/07-%E4%B8%8A%E4%BC%A0%E5%9B%BE%E7%89%87/
+
+## 只读
+
+<code src="./__demos__/editor/readonly.tsx" />
+
+## API
+
+API 参考 [wangeditor](https://www.wangeditor.com/) 和 [wangeditor-for-react](https://github.com/dongggcom/wangeditor-for-react) 即可。

docs/guide/advance/__demos__/form/base.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { SuperForm, SuperInput } from 'super-antd';
+
+import SuperQuill from './super-quill';
+
+const App = () => {
+  return (
+    <SuperForm debug>
+      <SuperInput name="name" label="姓名" />
+      <SuperQuill name="description" label="介绍" />
+    </SuperForm>
+  );
+};
+
+export default App;

docs/guide/advance/__demos__/form/custom.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { SuperForm, SuperInput } from 'super-antd';
+
+import SuperQuill from './super-quill';
+
+const App = () => {
+  return (
+    <SuperForm debug>
+      <SuperInput name="name" label="姓名" />
+      {/* 我们可以通过 fieldProps 设置原始属性，也就是 ReactQuillProps 的属性 */}
+      <SuperQuill name="description" label="介绍" fieldProps={{ preserveWhitespace: true }} />
+    </SuperForm>
+  );
+};
+
+export default App;

docs/guide/advance/__demos__/form/readonly.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { SuperForm, SuperInput } from 'super-antd';
+
+import SuperQuill from './super-quill';
+
+const App = () => {
+  return (
+    <SuperForm
+      initialValues={{
+        description:
+          '<p><strong>创意过程的 5 个阶段：</strong></p><ol><li>准备期：开始有意识或者无意识地沉静在有趣或者能唤起好奇心的问题中；</li><li>酝酿期：这个阶段，想法在潜意识里翻腾；</li><li>洞悉或称为“啊哈”时刻：就是阿基米德走出浴室，大声喊“我想出来”的那一刻；</li><li>评价期：人们需要决定自己的东西是否有价值，是否值得继续研究；</li><li>精心制作器：这个阶段也是花费时间最多的，也是最新辛苦的，就是爱迪生所说 1 % + 99% 的汗水。</li></ol>',
+      }}
+      debug
+    >
+      <SuperInput name="name" label="姓名" />
+      <SuperQuill name="description" label="介绍" readonly />
+    </SuperForm>
+  );
+};
+
+export default App;

docs/guide/advance/__demos__/form/super-quill/AntdQuill.tsx

@@ -0,0 +1,16 @@
+import 'react-quill/dist/quill.snow.css';
+import './super-quill.css';
+
+import React from 'react';
+import type { FC } from 'react';
+import ReactQuill, { ReactQuillProps } from 'react-quill';
+
+// 如果需要处理自己的逻辑
+export type AntdQuillProps = ReactQuillProps;
+
+const AntdQuill: FC<AntdQuillProps> = ({ value, onChange, ...props }) => {
+  // 如果需要加自己的逻辑，就这里加就好了
+  return <ReactQuill theme="snow" value={value} onChange={onChange} {...props} />;
+};
+
+export default AntdQuill;

docs/guide/advance/__demos__/form/super-quill/ProFormQuill.tsx

@@ -0,0 +1,34 @@
+import ProField from '@ant-design/pro-field';
+import createField from '@ant-design/pro-form/es/BaseForm/createField';
+import type { ProFormItemProps } from '@ant-design/pro-form/lib/interface';
+import React from 'react';
+import xss from 'xss';
+
+import AntdQuill, { AntdQuillProps } from './AntdQuill';
+
+// 类型
+export type ProFormQuillProps = ProFormItemProps<AntdQuillProps>;
+
+const ProFormQuill = ({ fieldProps, proFieldProps }: ProFormQuillProps) => (
+  <ProField
+    mode="edit"
+    valueType="text"
+    fieldProps={fieldProps}
+    render={(text) => {
+      return <div style={{ marginTop: 5 }} dangerouslySetInnerHTML={{ __html: xss(text) }}></div>;
+    }}
+    renderFormItem={(text, props) => {
+      const { placeholder, ...otherProps } = props;
+      return (
+        <AntdQuill
+          value={text}
+          placeholder={Array.isArray(placeholder) ? placeholder.join(',') : placeholder}
+          {...otherProps}
+        />
+      );
+    }}
+    {...proFieldProps}
+  />
+);
+
+export default createField<ProFormQuillProps>(ProFormQuill);

docs/guide/advance/__demos__/form/super-quill/index.tsx

@@ -0,0 +1,12 @@
+import type { FC } from 'react';
+
+import { createSuperFormItem } from 'super-antd';
+import type { CreateSuperFormItemProps } from 'super-antd';
+
+import ProFormQuill from './ProFormQuill';
+import type { ProFormQuillProps } from './ProFormQuill';
+
+export type SuperQuillProps = CreateSuperFormItemProps<ProFormQuillProps>;
+const SuperQuill: FC<SuperQuillProps> = createSuperFormItem(ProFormQuill);
+
+export default SuperQuill;

docs/guide/advance/__demos__/form/super-quill/super-quill.css

@@ -0,0 +1,3 @@
+.ql-container {
+  height: 300px;
+}

docs/guide/advance/__demos__/form/super.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { SuperCheckbox, SuperForm, SuperInput } from 'super-antd';
+
+import SuperQuill from './super-quill';
+
+const App = () => {
+  return (
+    <SuperForm debug>
+      <SuperInput name="name" label="姓名" />
+      <SuperCheckbox name="more" text="更多设置"></SuperCheckbox>
+      <SuperQuill name="description" label="介绍" linkageFields="more" visibleOn="{{data.more}}" />
+    </SuperForm>
+  );
+};
+
+export default App;