Merge pull request #563 from answerdev/feat/1.2.0/ui

Feat/1.2.0/UI

ui/src/components/Editor/index.tsx

@@ -1,7 +1,6 @@
 import {
   useEffect,
   useRef,
-  useState,
   ForwardRefRenderFunction,
   forwardRef,
   useImperativeHandle,
@@ -74,14 +73,6 @@ const MDEditor: ForwardRefRenderFunction<EditorRef, Props> = (
     autoFocus,
   });
 
-  const [markdown, setMarkdown] = useState<string>(value || '');
-
-  useEffect(() => {
-    if (value !== markdown) {
-      setMarkdown(value);
-    }
-  }, [value]);
-
   const getHtml = () => {
     return previewRef.current?.getHtml();
   };
@@ -103,29 +94,31 @@ const MDEditor: ForwardRefRenderFunction<EditorRef, Props> = (
     <>
       <div className={classNames('md-editor-wrap rounded', className)}>
         <EditorContext.Provider value={editor}>
-          <PluginRender
-            type="editor"
-            className="toolbar-wrap px-3 d-flex align-items-center flex-wrap"
-            editor={editor}
-            previewElement={previewRef.current?.element}>
-            <Heading />
-            <Bold />
-            <Italice />
-            <div className="toolbar-divider" />
-            <Code />
-            <LinkItem />
-            <BlockQuote />
-            <Image />
-            <Table />
-            <div className="toolbar-divider" />
-            <OL />
-            <UL />
-            <Indent />
-            <Outdent />
-            <Hr />
-            <div className="toolbar-divider" />
-            <Help />
-          </PluginRender>
+          {editor && (
+            <PluginRender
+              type="editor"
+              className="toolbar-wrap px-3 d-flex align-items-center flex-wrap"
+              editor={editor}
+              previewElement={previewRef.current?.element}>
+              <Heading />
+              <Bold />
+              <Italice />
+              <div className="toolbar-divider" />
+              <Code />
+              <LinkItem />
+              <BlockQuote />
+              <Image />
+              <Table />
+              <div className="toolbar-divider" />
+              <OL />
+              <UL />
+              <Indent />
+              <Outdent />
+              <Hr />
+              <div className="toolbar-divider" />
+              <Help />
+            </PluginRender>
+          )}
         </EditorContext.Provider>
 
         <div className="content-wrap">
@@ -135,7 +128,7 @@ const MDEditor: ForwardRefRenderFunction<EditorRef, Props> = (
           />
         </div>
       </div>
-      <Viewer ref={previewRef} value={markdown} />
+      <Viewer ref={previewRef} value={value} />
     </>
   );
 };

ui/src/components/Editor/utils/index.ts

@@ -127,7 +127,8 @@ export const useEditor = ({
   onFocus,
   onBlur,
 }) => {
-  const [editor, setEditor] = useState<Editor>();
+  const [editor, setEditor] = useState<CodeMirror.Editor | null>(null);
+  const [value, setValue] = useState<string>('');
 
   const onEnter = (cm) => {
     const cursor = cm.getCursor();
@@ -168,13 +169,13 @@ export const useEditor = ({
       placeholder,
       focus: autoFocus,
     });
-    setEditor(cm);
 
+    setEditor(cm);
     createEditorUtils(codeMirror, cm);
 
     cm.on('change', (e) => {
       const newValue = e.getValue();
-      onChange?.(newValue);
+      setValue(newValue);
     });
 
     cm.on('focus', () => {
@@ -187,8 +188,13 @@ export const useEditor = ({
     cm.addKeyMap({
       Enter: onEnter,
     });
+    return cm;
   };
 
+  useEffect(() => {
+    onChange?.(value);
+  }, [value]);
+
   useEffect(() => {
     if (!(editorRef.current instanceof HTMLElement)) {
       return;

ui/src/index.scss

@@ -322,10 +322,6 @@ img[src=""] {
   vertical-align: -0.125em;
 }
 
-.algoliaSvg {
-  display: inline-block;
-  width: 92px;
-  height: 24px;
-  fill: currentColor;
-  vertical-align: -0.125em;
+.max-width-200 {
+  max-width: 200px;
 }

ui/src/pages/403/index.tsx

@@ -0,0 +1,7 @@
+import { HttpErrorContent } from '@/components';
+
+const Index = () => {
+  return <HttpErrorContent httpCode="403" />;
+};
+
+export default Index;

ui/src/plugins/builtin/SearchInfo/index.tsx

@@ -15,13 +15,11 @@ const pluginInfo: PluginInfo = {
 };
 
 const Index: FC = () => {
-  console.log(111111);
   const { t } = useTranslation(getTransNs(), {
     keyPrefix: getTransKeyPrefix(pluginInfo),
   });
 
   const { data } = useGetSearchPLuginInfo();
-  console.log(data);
   // if (!data?.icon) return null;
 
   return (
@@ -31,7 +29,7 @@ const Index: FC = () => {
       target="_blank"
       rel="noopener noreferrer">
       <span className="small text-secondary me-2">{t('search_by')}</span>
-      <SvgIcon base64={data?.icon} />
+      <SvgIcon base64={data?.icon} svgClassName="max-width-200" />
     </a>
   );
 };

ui/src/router/routes.ts

@@ -394,6 +394,10 @@ const routes: RouteNode[] = [
         path: '50x',
         page: 'pages/50X',
       },
+      {
+        path: '403',
+        page: 'pages/403',
+      },
     ],
   },
   {