Merge branch 'feat/ui-0.7.0' of git.backyard.segmentfault.com:opensource/answer into feat/ui-0.7.0

i18n/en_US.yaml

@@ -552,7 +552,7 @@ ui:
       placeholder: Search
   footer:
     build_on: >-
-      Built on <1> Answer </1>- the open-source software that power Q&A
+      Built on <1> Answer </1>- the open-source software that powers Q&A
       communities.<br />Made with love © {{cc}}.
   upload_img:
     name: Change
@@ -732,6 +732,7 @@ ui:
     write_answer:
       title: Your Answer
       btn_name: Post your answer
+      add_another_answer: Add another answer
       confirm_title: Continue to answer
       continue: Continue
       confirm_info: >-

i18n/zh_CN.yaml

@@ -505,7 +505,7 @@ ui:
       placeholder: 搜索
   footer:
     build_on: >-
-      Built on <1> Answer </1>- the open-source software that power Q&A
+      Built on <1> Answer </1>- the open-source software that powers Q&A
       communities<br />Made with love © 2022 Answer
   upload_img:
     name: 更改图片

ui/package.json

@@ -50,6 +50,7 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
+    "@types/color": "^3.0.3",
     "@types/jest": "^27.5.2",
     "@types/lodash": "^4.14.184",
     "@types/marked": "^4.0.6",

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.scss

@@ -169,7 +169,7 @@
     }
   }
   .content-wrap {
-    height: 270px;
+    height: 264px;
   }
 
   .CodeMirror {

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/components/TextArea/index.tsx

@@ -1,7 +1,9 @@
 import { FC, useRef, useEffect, memo } from 'react';
 import { FormControl, FormControlProps } from 'react-bootstrap';
 
-const TextArea: FC<FormControlProps> = ({ value, onChange, size }) => {
+const TextArea: FC<
+  FormControlProps & { rows?: number; autoFocus?: boolean }
+> = ({ value, onChange, size, rows = 1, autoFocus = true, ...rest }) => {
   const ref = useRef<HTMLTextAreaElement>(null);
 
   const autoGrow = () => {
@@ -21,13 +23,14 @@ const TextArea: FC<FormControlProps> = ({ value, onChange, size }) => {
     <FormControl
       as="textarea"
       className="resize-none font-monospace"
-      rows={1}
+      rows={rows}
       size={size}
       value={value}
       onChange={onChange}
-      autoFocus
+      autoFocus={autoFocus}
       ref={ref}
       onInput={autoGrow}
+      {...rest}
     />
   );
 };

ui/src/pages/Admin/Dashboard/components/AnswerLinks/index.tsx

@@ -10,15 +10,12 @@ const AnswerLinks = () => {
         <h6 className="mb-3">{t('answer_links')}</h6>
         <Row>
           <Col xs={6}>
-            <a href="https://answer.dev" target="_blank" rel="noreferrer">
+            <a href="https://answer.dev/docs" target="_blank" rel="noreferrer">
               {t('documents')}
             </a>
           </Col>
           <Col xs={6}>
-            <a
-              href="https://github.com/answerdev/answer/issues"
-              target="_blank"
-              rel="noreferrer">
+            <a href="https://meta.answer.dev" target="_blank" rel="noreferrer">
               {t('feedback')}
             </a>
           </Col>

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

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { marked } from 'marked';
 import classNames from 'classnames';
 
-import { Editor, Modal } from '@/components';
+import { Editor, Modal, TextArea } from '@/components';
 import { FormDataType } from '@/common/interface';
 import { postAnswer } from '@/services';
 
@@ -81,10 +81,13 @@ const Index: FC<Props> = ({ visible = false, data, callback }) => {
 
     handleSubmit();
   };
+  const handleFocusForTextArea = () => {
+    setShowEditor(true);
+  };
 
   return (
     <Form noValidate className="mt-4">
-      {showEditor && (
+      {(!data.answered || showEditor) && (
         <Form.Group className="mb-3">
           <Form.Label>
             <h5>{t('title')}</h5>
@@ -93,28 +96,41 @@ const Index: FC<Props> = ({ visible = false, data, callback }) => {
             isInvalid={formData.content.isInvalid}
             className="d-none"
           />
-          <Editor
-            className={classNames(
-              'form-control p-0',
-              focusType === 'answer' && 'focus',
-            )}
-            value={formData.content.value}
-            onChange={(val) => {
-              setFormData({
-                content: {
-                  value: val,
-                  isInvalid: false,
-                  errorMsg: '',
-                },
-              });
-            }}
-            onFocus={() => {
-              setForceType('answer');
-            }}
-            onBlur={() => {
-              setForceType('');
-            }}
-          />
+          {!showEditor && !data.answered && (
+            <div className="d-flex">
+              <TextArea
+                className="w-100"
+                rows={8}
+                autoFocus={false}
+                onFocus={handleFocusForTextArea}
+              />
+            </div>
+          )}
+          {showEditor && (
+            <Editor
+              className={classNames(
+                'form-control p-0',
+                focusType === 'answer' && 'focus',
+              )}
+              value={formData.content.value}
+              autoFocus
+              onChange={(val) => {
+                setFormData({
+                  content: {
+                    value: val,
+                    isInvalid: false,
+                    errorMsg: '',
+                  },
+                });
+              }}
+              onFocus={() => {
+                setForceType('answer');
+              }}
+              onBlur={() => {
+                setForceType('');
+              }}
+            />
+          )}
 
           <Form.Control.Feedback type="invalid">
             {formData.content.errorMsg}
@@ -122,7 +138,11 @@ const Index: FC<Props> = ({ visible = false, data, callback }) => {
         </Form.Group>
       )}
 
-      <Button onClick={clickBtn}>{t('btn_name')}</Button>
+      {data.answered && !showEditor ? (
+        <Button onClick={clickBtn}>{t('add_another_answer')}</Button>
+      ) : (
+        <Button onClick={clickBtn}>{t('btn_name')}</Button>
+      )}
     </Form>
   );
 };

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

@@ -128,6 +128,13 @@ const Index = () => {
       count: answers.count + 1,
       list: [...answers.list, obj],
     });
+
+    if (question) {
+      setQuestion({
+        ...question,
+        answered: true,
+      });
+    }
   };
 
   useEffect(() => {