fix: Fixed bug with placeholder (#114)

Author: nikel

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(
     () => (

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) => {