From d7a4df2fe58908b98f867bfaffd6356eb1007863 Mon Sep 17 00:00:00 2001
From: nikel <r0075301net.r@yandex.ru>
Date: Tue, 26 Apr 2022 12:23:36 +0300
Subject: [PATCH] fix: Fixed bug with placeholder (#114)

---
 src/index.tsx   | 11 +++++++----
 website/App.tsx |  9 +++++++++
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/index.tsx b/src/index.tsx
index 71ef8ea9..312cd5b5 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -45,7 +45,10 @@ export default React.forwardRef<HTMLTextAreaElement, TextareaCodeEditorProps>((p
   } = props;
 
   const [value, setValue] = useState(props.value || '');
-  useEffect(() => setValue(props.value || ''), [props.value]);
+  useEffect(
+    () => setValue(props.value || ''),
+    [props.value]
+  );
   const textRef = useRef<HTMLTextAreaElement>(null);
   useImperativeHandle<HTMLTextAreaElement, HTMLTextAreaElement>(ref, () => textRef.current!);
 
@@ -59,12 +62,12 @@ export default React.forwardRef<HTMLTextAreaElement, TextareaCodeEditorProps>((p
   const htmlStr = useMemo(
     () =>
       processHtml(
-        `<pre aria-hidden=true><code ${language ? `class="language-${language}"` : ''} >${htmlEncode(
-          String(value || ''),
+        `<pre aria-hidden=true><code ${language && value ? `class="language-${language}"` : ''} >${htmlEncode(
+          String(value || placeholder || ''),
         )}</code><br /></pre>`,
         rehypePlugins,
       ),
-    [value, language, rehypePlugins],
+    [value, placeholder, language, rehypePlugins],
   );
   const preView = useMemo(
     () => (
diff --git a/website/App.tsx b/website/App.tsx
index 8101fcc8..f1b75640 100644
--- a/website/App.tsx
+++ b/website/App.tsx
@@ -74,6 +74,15 @@ const App: React.FC = () => {
           onChange={(evn) => setCode(evn.target.value)}
         />
       </div>
+      <div className="App-editor">
+        <span>Test case</span>
+        <div style={{ display: 'flex', flexDirection: 'row', marginTop: 12 }}>
+          <TextareaCodeEditor placeholder={`Please enter ${(language || '').toLocaleUpperCase()} code.`} />
+          <button type="button" style={{ marginLeft: 12 }}>
+            Edit
+          </button>
+        </div>
+      </div>
       <div className="App-tools" style={{ marginTop: 5 }}>
         <select value={language} onChange={(evn) => setLanguage(evn.target.value)}>
           {exts.map((keyName, idx) => {