Merge branch 'feat/ui-0.7.0' into 'test'

refactor(ui): add autoFocus prop for editor

See merge request opensource/answer!352

ui/src/components/Editor/Editor.tsx

@@ -19,6 +19,7 @@ const Editor = ({
   onBlur,
   editorPlaceholder,
   getEditorInstance,
+  autoFocus,
 }) => {
   const elRef = useRef<HTMLDivElement>(null);
   const [editor, setEditor] = useState<CodeMirror.Editor | null>(null);
@@ -38,6 +39,9 @@ const Editor = ({
           lineWrapping: true,
           placeholder: editorPlaceholder,
         });
+        if (autoFocus) {
+          cm.focus();
+        }
         cm.on('change', (e) => {
           const newValue = e.getValue();
           eventRef.current?.onChange?.(newValue);

ui/src/components/Editor/index.tsx

@@ -49,10 +49,19 @@ interface Props extends EventRef {
   editorPlaceholder?;
   className?;
   value;
+  autoFocus?: boolean;
 }
 
 const MDEditor: ForwardRefRenderFunction<EditorRef, Props> = (
-  { editorPlaceholder = '', className = '', value, onChange, onFocus, onBlur },
+  {
+    editorPlaceholder = '',
+    className = '',
+    value,
+    onChange,
+    onFocus,
+    onBlur,
+    autoFocus = false,
+  },
   ref,
 ) => {
   const [markdown, setMarkdown] = useState<string>(value || '');
@@ -146,6 +155,7 @@ const MDEditor: ForwardRefRenderFunction<EditorRef, Props> = (
         <div className="content-wrap">
           <Editor
             value={markdown}
+            autoFocus={autoFocus}
             onChange={handleChange}
             onFocus={handleFocus}
             onBlur={handleBlur}

ui/src/pages/Questions/Detail/components/WriteAnswer/index.tsx

@@ -100,7 +100,7 @@ const Index: FC<Props> = ({ visible = false, data, callback }) => {
             <div className="d-flex">
               <TextArea
                 className="w-100"
-                rows={12}
+                rows={8}
                 autoFocus={false}
                 onFocus={handleFocusForTextArea}
               />
@@ -113,6 +113,7 @@ const Index: FC<Props> = ({ visible = false, data, callback }) => {
                 focusType === 'answer' && 'focus',
               )}
               value={formData.content.value}
+              autoFocus
               onChange={(val) => {
                 setFormData({
                   content: {