From 3151d797f778b53d43aae02456a36709db5dbe4e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=90=D0=BD=D0=B5=D0=B2=D1=80=D0=B8=D0=B7=D0=BC=D0=B0?=
 <aneurysmjs@outlook.com>
Date: Mon, 21 Jan 2019 16:33:19 +0300
Subject: [PATCH] Jero/hotfix/initial value rich editor (#891)

* feat (RichEditor) trigger initial value

* refactor (Manage/Store/Products/Product) set font-size for long description label

* refactor (Manage/Store/Products/Product) apply styles for asterisk
---
 src/components/RichEditor/RichEditor.js       | 23 ++++++++++++++++++-
 .../Store/Products/Product/Product.scss       | 11 ++++++++-
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/src/components/RichEditor/RichEditor.js b/src/components/RichEditor/RichEditor.js
index 82ac0a47..349b82f5 100644
--- a/src/components/RichEditor/RichEditor.js
+++ b/src/components/RichEditor/RichEditor.js
@@ -34,6 +34,14 @@ const menu = {
   tools: { title: 'Tools', items: 'spellchecker code' },
 };
 
+const initialValue = `
+  <p>
+    <span style="font-size: 14px; color: rgb(199, 199, 199);" data-mce-style="font-size: 14px; color: #c7c7c7;">
+      Write something...
+    </span>
+  </p>
+`;
+
 class RichEditor extends Component<PropsType> {
   static defaultProps = {
     onChange: () => {},
@@ -44,14 +52,27 @@ class RichEditor extends Component<PropsType> {
     onChange(text);
   };
 
+  isContentEmpty = (): boolean => {
+    const { content } = this.props;
+    return isEmpty(content);
+  };
+  // $FlowIgnore
+  handleInit = e => {
+    if (this.isContentEmpty()) {
+      const { target } = e;
+      this.handleEditorChange(target.getContent());
+    }
+  };
+
   render() {
     const { content, onError } = this.props;
     return (
       <Fragment>
         <Editor
           apiKey="gk8doqf0fk35w9w8aad4ntw74keuwxza7u2ajewvqlt0up9z"
-          initialValue={!isEmpty(content) ? content : ''}
+          initialValue={!this.isContentEmpty() ? content : initialValue}
           onEditorChange={this.handleEditorChange}
+          onInit={this.handleInit}
           init={{
             menubar: false,
             branding: false,
diff --git a/src/pages/Manage/Store/Products/Product/Product.scss b/src/pages/Manage/Store/Products/Product/Product.scss
index fa562333..44d74ea5 100644
--- a/src/pages/Manage/Store/Products/Product/Product.scss
+++ b/src/pages/Manage/Store/Products/Product/Product.scss
@@ -260,11 +260,20 @@
 }
 
 .editor {
-  margin: 3rem -0 7rem;
+  margin: 4rem 0 7rem;
   position: relative;
 
   span.label {
     display: block;
+    font-size: 14px;
+    transform: scale(0.9) translate(0, 0);
+    transform-origin: left top 0;
+  }
+
+  span.asterisk {
+    font-size: 18px;
+    position: relative;
+    top: 2px;
   }
 }