From 62d6f8e3a7bec763cbc53dfebc4dedab98ecff87 Mon Sep 17 00:00:00 2001
From: 2betop <2betop.cn@gmail.com>
Date: Mon, 20 Apr 2020 17:31:07 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=BC=B9=E5=87=BA=E6=A1=86?=
 =?UTF-8?q?=E9=87=8C=E9=9D=A2=E7=9A=84=20rich-text=20=E9=BB=98=E8=AE=A4?=
 =?UTF-8?q?=E5=AE=BD=E5=BA=A6=E4=B8=8D=E6=AD=A3=E7=A1=AE=E7=9A=84=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 scss/components/form/_rich-text.scss |  4 ++++
 src/components/RichText.tsx          | 11 +++++++++++
 src/utils/resize-sensor.ts           | 14 +++++++++++++-
 3 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/scss/components/form/_rich-text.scss b/scss/components/form/_rich-text.scss
index 05e65f8f4..086814f72 100644
--- a/scss/components/form/_rich-text.scss
+++ b/scss/components/form/_rich-text.scss
@@ -9,6 +9,10 @@
     border: 0;
   }
 
+  > textarea {
+    width: 100%;
+  }
+
   min-height: px2rem(200px);
   height: auto;
   border: $Form-input-borderWidth solid $Form-input-borderColor;
diff --git a/src/components/RichText.tsx b/src/components/RichText.tsx
index f1580fe43..e136ae1c4 100644
--- a/src/components/RichText.tsx
+++ b/src/components/RichText.tsx
@@ -49,6 +49,7 @@ import $ from 'jquery';
 // Require Editor CSS files.
 import 'froala-editor/css/froala_style.min.css';
 import 'froala-editor/css/froala_editor.pkgd.min.css';
+import {resizeSensor} from '../utils/resize-sensor';
 
 export default class FroalaEditor extends React.Component<any, any> {
   listeningEvents: Array<any> = [];
@@ -87,6 +88,16 @@ export default class FroalaEditor extends React.Component<any, any> {
     this.$element = $(ref);
     this.setContent(true);
     this.registerEvents();
+    resizeSensor(
+      ref.parentElement,
+      () => {
+        $(ref)
+          .prev('.fr-box')
+          .find('.fr-toolbar')
+          .css('width', '');
+      },
+      true
+    );
     this.$editor = this.$element
       .froalaEditor(this.config)
       .data('froala.editor').$el;
diff --git a/src/utils/resize-sensor.ts b/src/utils/resize-sensor.ts
index ea67915d5..1b31784b9 100644
--- a/src/utils/resize-sensor.ts
+++ b/src/utils/resize-sensor.ts
@@ -122,7 +122,19 @@ function detach(element: HTMLElement) {
   }
 }
 
-export function resizeSensor(element: HTMLElement, callback: Function) {
+export function resizeSensor(
+  element: HTMLElement,
+  callback: Function,
+  once: boolean = false
+) {
+  if (once) {
+    attachResizeEvent(element, function(this: any) {
+      callback.apply(this, arguments);
+      detach(element);
+    });
+    return;
+  }
+
   attachResizeEvent(element, callback);
   let detached = false;