website: fix placeholder issue.

Author: jaywcjlove

website/pages/run/Textarea.module.less

@@ -28,6 +28,9 @@
   -webkit-font-smoothing: antialiased;
   -webkit-text-fill-color: transparent;
   outline: 0;
+  &:global(.empty) {
+    -webkit-text-fill-color: #bfbfbf;
+  }
 }
 
 .codePreview {

website/pages/run/Textarea.tsx

@@ -35,7 +35,7 @@ interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement
 }
 
 const Textarea = (props: TextareaProps) => {
-  const { language, value = '' } = props;
+  const { className, language, value = '', ...other } = props;
   const textRef = useRef<HTMLTextAreaElement>(null);
   const viewRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
@@ -52,9 +52,9 @@ const Textarea = (props: TextareaProps) => {
         autoCorrect="off"
         spellCheck="false"
         autoCapitalize="off"
-        className={styles.textarea}
+        {...other}
         ref={textRef}
-        {...props}
+        className={`${className || ''} ${styles.textarea}`}
         value={value}
       />
       <div

website/pages/run/index.tsx

@@ -51,6 +51,8 @@ export default function Run() {
             <TextareaEditor
               value={htmlStr}
               language="html"
+              className={htmlStr ? '' : 'empty'}
+              placeholder="Please enter HTML code."
               onPaste={(event) => {
                 let paste = (event.clipboardData || (window as any).clipboardData).getData('text');
                 setHtmlStr(paste.replace(/^\n+/g, '').replace(/\n+$/g, ''));
@@ -70,6 +72,8 @@ export default function Run() {
             <TextareaEditor
               value={jsStr}
               language="js"
+              className={jsStr ? '' : 'empty'}
+              placeholder="Please enter JavaScript code."
               onPaste={(event) => {
                 let paste = (event.clipboardData || (window as any).clipboardData).getData('text');
                 setJsStr(paste.replace(/^\n+/g, '').replace(/\n+$/g, ''));
@@ -89,6 +93,8 @@ export default function Run() {
             <TextareaEditor
               value={cssStr}
               language="css"
+              className={cssStr ? '' : 'empty'}
+              placeholder="Please enter CSS code."
               onPasteCapture={(event) => {
                 let paste = (event.clipboardData || (window as any).clipboardData).getData('text');
                 paste = paste.replace(/^\n+/g, '').replace(/\n+$/g, '');