refactor(console): support placeholder in code editor (#3462)

packages/console/src/components/CodeEditor/index.tsx

@@ -1,3 +1,4 @@
+import { conditional } from '@silverhand/essentials';
 import classNames from 'classnames';
 import type { ChangeEvent, KeyboardEvent } from 'react';
 import { useRef } from 'react';
@@ -16,17 +17,19 @@ type Props = {
   tabSize?: number;
   hasError?: boolean;
   errorMessage?: string;
+  placeholder?: string;
 };
 
 const CodeEditor = ({
   className,
   language,
   isReadonly = false,
-  value = '',
+  value,
   onChange,
   tabSize = 2,
   hasError,
   errorMessage,
+  placeholder,
 }: Props) => {
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
@@ -55,7 +58,7 @@ const CodeEditor = ({
   return (
     <>
       <div className={classNames(styles.container, className)}>
-        <CopyToClipboard value={value} variant="icon" className={styles.copy} />
+        <CopyToClipboard value={value ?? ''} variant="icon" className={styles.copy} />
         <div className={styles.editor}>
           {/* SyntaxHighlighter is a readonly component, so a transparent <textarea> layer is needed
       in order to support user interactions, such as code editing, copy-pasting, etc. */}
@@ -68,6 +71,7 @@ const CodeEditor = ({
             readOnly={isReadonly}
             spellCheck="false"
             value={value}
+            placeholder={placeholder}
             onChange={handleChange}
             onKeyDown={handleKeydown}
           />
@@ -93,7 +97,7 @@ const CodeEditor = ({
             language={language}
             style={theme}
           >
-            {value}
+            {conditional(Boolean(value) && value) ?? placeholder ?? ''}
           </SyntaxHighlighter>
         </div>
       </div>

packages/console/src/pages/SignInExperience/index.tsx

@@ -95,8 +95,7 @@ const SignInExperience = () => {
     }
 
     return signInExperienceParser.toLocalForm(data);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data]);
-  }, [data, t]); // Form data default value depends on i18n, manually trigger re-render when i18n changes.
 
   useEffect(() => {
     if (defaultFormData) {

packages/console/src/pages/SignInExperience/tabs/Branding/CustomCssForm.tsx

@@ -9,7 +9,7 @@ import useDocumentationUrl from '@/hooks/use-documentation-url';
 
 import type { SignInExperienceForm } from '../../types';
 import * as tabsStyles from '../index.module.scss';
-import * as brandingStyles from './index.module.scss';
+import * as brandingStyles from './CustomCssForm.module.scss';
 
 const CustomCssForm = () => {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
@@ -53,6 +53,7 @@ const CustomCssForm = () => {
               className={brandingStyles.customCssCodeEditor}
               language="scss"
               value={value ?? undefined}
+              placeholder={t('sign_in_exp.custom_css.css_code_editor_content_placeholder')}
               onChange={onChange}
             />
           )}

packages/console/src/pages/SignInExperience/utils/form.ts

@@ -1,7 +1,6 @@
 import type { SignInExperience, SignUp } from '@logto/schemas';
 import { SignInMode, SignInIdentifier } from '@logto/schemas';
 import { conditional } from '@silverhand/essentials';
-import { t } from 'i18next';
 import type { DeepRequired, FieldErrorsImpl } from 'react-hook-form';
 
 import {
@@ -38,10 +37,7 @@ export const signInExperienceParser = {
       ...signInExperience,
       signUp: signInExperienceParser.toLocalSignUp(signUp),
       createAccountEnabled: signInMode !== SignInMode.SignIn,
-      // CodeEditor component can not properly handle i18n default value, put placeholder here as workaround
+      customCss: customCss ?? undefined,
-      customCss: customCss?.length
-        ? customCss
-        : t('admin_console.sign_in_exp.custom_css.css_code_editor_content_placeholder'),
     };
   },
   toRemoteModel: (setup: SignInExperienceForm): SignInExperience => {