deps: 更新 froala 版本，去除 jQuery 依赖；修复 rootClose 不生效问题

docs/zh-CN/components/form/input-rich-text.md

@@ -117,25 +117,22 @@ froala 可以通过设置 buttons 参数来控制显示哪些按钮，默认是
 
 ```json
 [
+  "undo",
+  "redo",
   "paragraphFormat",
-  "quote",
-  "color",
-  "|",
+  "textColor",
+  "backgroundColor",
   "bold",
-  "italic",
   "underline",
   "strikeThrough",
-  "|",
   "formatOL",
   "formatUL",
   "align",
-  "|",
+  "quote",
   "insertLink",
   "insertImage",
+  "insertEmotion",
   "insertTable",
-  "|",
-  "undo",
-  "redo",
   "html"
 ]
 ```

examples/components/Components.tsx

@@ -547,7 +547,7 @@ export const components = [
           )
       },
       {
-        label: 'InpuRichText 富文本编辑器',
+        label: 'InputRichText 富文本编辑器',
         path: '/zh-CN/components/form/input-rich-text',
         getComponent: () =>
           import('../../docs/zh-CN/components/form/input-rich-text.md').then(

examples/loader.ts

@@ -5,7 +5,6 @@
   const mapping: {
     [propName: string]: any;
   } = {
-    'jquery': __moduleId('jquery'),
     'react': __moduleId('react'),
     'react-dom': __moduleId('react-dom'),
     'immutability-helper': __moduleId('immutability-helper'),

fis-conf.js

@@ -491,8 +491,8 @@ if (fis.project.currentMedia() === 'publish') {
         '!mpegts.js/**',
         '!hls.js/**',
         '!froala-editor/**',
+        '!react-froala-wysiwyg/**',
         '!tinymce/**',
-        '!jquery/**',
         '!zrender/**',
         '!echarts/**',
         '!echarts-stat/**',
@@ -525,7 +525,7 @@ if (fis.project.currentMedia() === 'publish') {
       'rich-text.js': [
         'src/components/RichText.tsx',
         'froala-editor/**',
-        'jquery/**'
+        'react-froala-wysiwyg/**'
       ],
 
       'tinymce.js': ['src/components/Tinymce.tsx', 'tinymce/**'],
@@ -565,8 +565,8 @@ if (fis.project.currentMedia() === 'publish') {
         '!mpegts.js/**',
         '!hls.js/**',
         '!froala-editor/**',
+        '!react-froala-wysiwyg/**',
         '!src/components/RichText.tsx',
-        '!jquery/**',
         '!zrender/**',
         '!echarts/**',
         '!papaparse/**',
@@ -786,8 +786,8 @@ if (fis.project.currentMedia() === 'publish') {
         '!mpegts.js/**',
         '!hls.js/**',
         '!froala-editor/**',
+        '!react-froala-wysiwyg/**',
         '!tinymce/**',
-        '!jquery/**',
         '!zrender/**',
         '!echarts/**',
         '!echarts-stat/**',
@@ -820,7 +820,7 @@ if (fis.project.currentMedia() === 'publish') {
       'pkg/rich-text.js': [
         'src/components/RichText.js',
         'froala-editor/**',
-        'jquery/**'
+        'react-froala-wysiwyg/**'
       ],
 
       'pkg/tinymce.js': ['src/components/Tinymce.tsx', 'tinymce/**'],
@@ -873,8 +873,8 @@ if (fis.project.currentMedia() === 'publish') {
         '!mpegts.js/**',
         '!hls.js/**',
         '!froala-editor/**',
+        '!react-froala-wysiwyg/**',
         '!src/components/RichText.tsx',
-        '!jquery/**',
         '!zrender/**',
         '!echarts/**',
         '!papaparse/**',

package.json

@@ -48,12 +48,11 @@
     "echarts-stat": "^1.2.0",
     "exceljs": "^4.3.0",
     "file-saver": "^2.0.2",
-    "froala-editor": "2.9.6",
+    "froala-editor": "3.1.1",
     "hls.js": "1.0.10",
     "hoist-non-react-statics": "^3.3.2",
     "hotkeys-js": "^3.8.7",
     "immutability-helper": "^3.1.1",
-    "jquery": "^3.2.1",
     "keycode": "^2.1.9",
     "lodash": "^4.17.15",
     "markdown-it": "^12.0.6",
@@ -77,6 +76,7 @@
     "react-datetime": "2.16.2",
     "react-dom": "^16.8.6",
     "react-dropzone": "^11.4.2",
+    "react-froala-wysiwyg": "3.1.1",
     "react-input-range": "1.3.0",
     "react-json-view": "1.21.3",
     "react-overlays": "5.1.1",

scss/components/form/_rich-text.scss

@@ -29,7 +29,11 @@
     max-height: 400px;
     box-shadow: none;
     overflow: auto;
-    border-top: 1px solid var(--Form-input-borderColor);
+    border: none;
+  }
+
+  .second-toolbar {
+    border: none;
   }
 
   .fr-toolbar .fr-command.fr-btn,
@@ -67,11 +71,6 @@
   &.is-focused {
     border: var(--Form-input-borderWidth) solid
       var(--Form-input-onFocused-borderColor);
-
-    .fr-box.fr-basic.fr-top .fr-wrapper {
-      border-top: var(--Form-input-borderWidth) solid
-        var(--Form-input-onFocused-borderColor);
-    }
   }
 
   .fr-box.fr-basic .fr-element {

src/components/Overlay.tsx

@@ -290,7 +290,13 @@ export default class Overlay extends React.Component<
 
     // This goes after everything else because it adds a wrapping div.
     if (rootClose) {
-      child = <RootClose onRootClose={props.onHide}>{child}</RootClose>;
+      child = (
+        <RootClose onRootClose={props.onHide}>
+          {(ref: any) => {
+            return <div ref={ref}>{child}</div>;
+          }}
+        </RootClose>
+      );
     }
 
     // @ts-ignore